按编辑按钮获取模态中每行的ID

Question

这是我的表格代码。我想在按下“编辑”按钮时获得打开模态中每行的ID。如何将所选行的ID发送到模态？在我的情况下，我只得到第一行ID。

感谢您的关注。

JS为模态形式

<script>
$(".btn[data-target='#myModal']").click(function() {
       var columnHeadings = $("thead th").map(function() {
                 return $(this).text();
              }).get();
       columnHeadings.pop();
       var columnValues = $(this).parent().siblings().map(function() {
                 return $(this).text();
       }).get();
  var modalBody = $('<div id="modalContent"></div>');
  var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
  $.each(columnHeadings, function(i, columnHeader) {
       var formGroup = $('<div class="form-group"></div>');
       formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
       formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />'); 
       modalForm.append(formGroup);
  });
  modalBody.append(modalForm);
  $('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
   $('form[name="modalForm"]').submit();
});
</script>

      <table class="simple-little-table table" cellspacing='0'>

        <tr>
            <th><p>&#8470;</p></th>
            <th><p>Name, Surname</p></th>
            <th>Own number</th>
            <th>Company Number</th>
    </tr>


     <?php  
        $result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
        while ($row = mysql_fetch_array($result, MYSQL_NUM))
    {
    $id=$row["0"];
    echo '<tr>
                        <td><p>'.$row[1].' '.$row[2].'</p></td>
                        <td><p>'.$row[4].'</p></td>
                        <td><p>'.$row[5].'</p></td>';
    ?>
    <td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>

                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">?   </span><span class="sr-only">Close</span>

                </button>

                <!--Here I am trying to echo ID-->
                <h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>

            </div>
            <div class="modal-body"> sadasdas</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
 <?php
         }
         ?>

这是表的图片

我需要在模态中获取行的ID

Answer 1

这就是你能做的。我没有使用您的数据，但假设您有足够的理解根据您的需要使用它。基本上我只是用一招。

<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>

你会得到这样的东西

<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>

<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>

现在使用这个jquery

$('.myclass').click(function(){
 var btn_id =  $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});

Answer 2

function getValue(id){
   $('#myModalLabel').text(id);
   $('#myModal').modal('show');
}

并在按钮单击时调用此函数而不是使用此功能

<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">

使用

<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">

Answer 3

您不应为每行为模态创建html，而只需创建一个模态，将在单击每一行时使用。然后，在click方法中使用jquery，您可以为模态设置不同的字段，例如id或其他内容，例如：

    $("btn").click(function(event) {
        id = event.target.id;
        $(#myModalIdField).text = id;
    });

Answer 4

用这个 ：

首先，给一个表id="name"，使用你自己的表和数据，如果你使用数据库或普通表;使用按钮模式作为 -

<table id="table">
    <thead>
        <tr>
            <th>Your data </th>
    </thead>
    <tbody>
        <tr>
            <td>Your Data </td>
            <td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
                  <div class=" modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- Modal Header -->
                            <div class="modal-header" id="myModalLabel">
                                <h4 class="modal-title">Enter Remarks:</h4>
                                <!-- <button type="button" class="close" data-dismiss="modal">&times;</button>-->
                            </div>
                            <!-- Modal body -->
                            <div class="modal-body">
                                <form action="" method="post">
                                    <div class="form-group">
                                        <label for="comment">Remarks:</label>
                                        <textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <input type="submit" name="msub" id="" class="btn btn-primary">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                  </div>
                </button>
            </td>
        </tr>
    </tbody>
</table>  

使用这个jquery：

var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function getValue(rindex) {
        rindex = this.rowIndex;
        $('#myModalLabel').text(rindex);
        $('#myModal').modal('show');
    }
}