通过按编辑按钮获取模态中每一行的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

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 2

这就是您可以做的。 我不使用您的数据，但假设您有足够的了解以根据需要使用它。 基本上我只是在使用一个把戏。

<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 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');
    }
}