我有一个动态表,如下所示
<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>
上表的示例 View 是
ID Action
1 Modal
2 Modal
3 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">×</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
如果我单击第 3 行模态按钮,那么我应该得到模态内的值应该是 3
但是,每当我从任何行单击模态按钮时,我都会获得值(value),我会得到 1
谁能告诉我如何更正代码
最佳答案
那是因为你所有的行都有相同的 id
,但 id
在同一个文档中应该是唯一的,我认为快速解决这个问题的最干净的方法是替换 id="ListId"
通过 class="ListId"
并通过 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? .
希望这可以帮助。
关于javascript - 无法在模态中携带正确的行值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34718149/