Question

我有一个动态表，如下所示

<table class="table table-custom" id="editable-usage">
    <thead>
        <tr>
            <th>ID</th>
            <th>Action</th>
         </tr>
    </thead>
    <tbody>
      <?
         $sql1="SELECT * from `table` where ORDER BY id DESC  LIMIT 10";
         $result1= mysqli_query($con, $sql1);
         if(mysqli_num_rows($result1)>0)
           {
             while($row1 = mysqli_fetch_assoc($result1))
                {   
                <tr class="odd gradeX">
                    <td><? echo $row1['id']; ?></td>
                    <td><div href="#" data-id="<?php echo $row1['id']; ?>" class="btn btn-drank mb-10" id="ListId" data-toggle="modal" data-target="#myModal2">Modal</div></td>
                </tr>
                <?}
            }?>
        </tbody>
    </table>

上表的示例视图是

ID  Action
1    Modal
2    Modal
3    Modal

从上表单击Modal时打开的模式是

  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Details</h4>
                </div>
                <div class="modal-body">
                    <div class="ShowData">
                    </div>
                </div>
            </div>
        </div>
    </div>

我希望将$row['id'];从表格移到模态并在<div class="ShowData">内打印。

JS：

$('#ListId').click(function(){
    var Id=$(this).attr('data-id');
    var requestid=$(this).data('requestid');

    $.ajax({url:"viewrequest.php?Id="+Id,cache:false,success:function(result){
        $(".ShowData").html(result);
    }});
});

viewrequest.php：

<?
    $Id=$_GET['Id'];
    echo $Id;
?>

我的要求是（根据上表）如果我点击第一行模态按钮然后我应该获得模态内的值应为1 如果我点击第二行模态按钮然后我应该在模态内获得值应为2 如果我点击第三行模态按钮，那么我应该得到modal里面的值应该是3 但每当我从任何一行点击模态按钮，我都会得到价值，我得到1

任何人都可以告诉我如何更正代码

Answer 1

因为你的所有行都有相同的id，但id在同一个文档中应该是唯一的，我认为最快解决这个问题的方法是将id="ListId"替换为class="ListId" {1}}并按class选择器附加点击事件：

<td>.... class="ListId btn btn-drank mb-10" data-toggle="modal"...>Modal</div></td>

$('.ListId').click(function(){

查看 Two HTML elements with same id attribute: How bad is it really? 。

希望这有帮助。

Answer 2

在你的DOM中，ID应该是唯一的。要使它们唯一，请在HTML中进行以下更改，如下所示：

HTML：

<tr class="odd gradeX">
    <td><? echo $row1['id']; ?></td>
    <td><div href="#" data-id="<?php echo $row1['id']; ?>" class="btn btn-drank mb-10" id="ListId<? echo $row1['id']; ?>" data-toggle="modal" data-target="#myModal2">Modal</div></td>
 </tr>

JS：

<script>
      $('div[id^=ListId').click(function(){
            var Id=$(this).attr('data-id');
            var requestid=$(this).data('requestid');
            $.ajax({url:"viewrequest.php?Id="+Id,cache:false,success:function(result){
                $(".ShowData").html(result);
            }});
        });
</script>

我们在这里创建了唯一的ID，在javascript中我们将click事件附加到div id以ListId

开头的

function curl($url) {
        $ch = curl_init();  // Initialising cURL
        curl_setopt($ch, CURLOPT_URL, $url);    // Setting cURL's URL option with the $url variable passed into the function
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); // Setting cURL's option to return the webpage data
        $data = curl_exec($ch); // Executing the cURL request and assigning the returned data to the $data variable
        curl_close($ch);    // Closing cURL
        return $data;   // Returning the data from the function
}

无法在模态

2 个答案: