我想在每一行上将数据库表ID作为动态HTML表的复选框值
我正在使用Ajax从MySQL数据库中获取数据,并创建一个新变量作为HTML文本,以附加在Table
的tbody上html的代码
<div class="col-sm-6" id="ftbl">
<label for="urbandata">View urban data</label>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Check</th>
<th>ID</th>
<th>Type</th>
<th>Master</th>
<th>Slave</th>
<th>Orbit</th>
<th>Mode</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS
的代码$.ajax({
url: "fetchurban.php",
method: "POST",
data:{id:id},
dataType: "JSON",
success: function(data){
if (data){
var trHTML = '';
$.each(data, function (i, item) {
trHTML +='<tr><td><input type="checkbox" id="checkview" onclick="QuickView()" name="'+ item.TblID +'"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title="Download High Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-cloud-download"></span></a></td></tr>' ;
});
$('#ftbl tbody').append(trHTML);
}
}
})
})
如果用户选择复选框,我想拥有数据库表的ID。现在,使用此代码,我对所有表的所有行都具有相同的ID
您可以将标识符设置为输入的data-
元素:
function QuickView(element) {
var rowId = $(element).data('id');
// here comes the rest of your code.
}
$.ajax({
url: "fetchurban.php",
method: "POST",
data:{id:id},
dataType: "JSON",
success: function(data){
if (data){
var trHTML = '';
$.each(data, function (i, item) {
trHTML +='<tr><td><input type="checkbox" data-id="'+ item.TblID +'" onclick="QuickView(this)"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title="Download High Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-cloud-download"></span></a></td></tr>' ;
});
$('#ftbl tbody').append(trHTML);
}
}
})
})
这是上述演示。
编辑:
我删除了有关不允许使用整数的ID属性的初始句子,因为它不再有效,如Quentin在评论中指出的那样。有时很难忘记您曾经学到的东西。