动态给table增加复选框,获取复选框选中的数据
PS→无奈:失败只是暂时停止成功,假如我不能,我就一定要;假如我要,我就一定能!
版权声明:本文为博主原创文章,未经博主允许不得转载。
html如下:
动态给以上table添加复选框,并且获取选中数据的js如下:
$(function(){
function initTableCheckbox() {
var $thr = $('table thead tr');
var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
/*将全选/反选复选框添加到表头最前,即增加一列*/
$thr.prepend($checkAllTh);
/*“全选/反选”复选框*/
var $checkAll = $thr.find('input');
$checkAll.click(function(event){
/*将所有行的选中状态设成全选框的选中状态*/
$tbr.find('input').prop('checked',$(this).prop('checked'));
/*并调整所有选中行的CSS样式*/
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('warning');
} else{
$tbr.find('input').parent().parent().removeClass('warning');
}
/*阻止向上冒泡,以防再次触发点击操作*/
event.stopPropagation();
});
/*点击全选框所在单元格时也触发全选框的点击操作*/
$checkAllTh.click(function(){
$(this).find('input').click();
});
var $tbr = $('table tbody tr');
var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
/*每一行都在最前面插入一个选中复选框的单元格*/
$tbr.prepend($checkItemTd);
/*点击每一行的选中复选框时*/
$tbr.find('input').click(function(event){
/*调整选中行的CSS样式*/
$(this).parent().parent().toggleClass('warning');
/*如果已经被选中行的行数等于表格的数据行数,将全选框设为选中状态,否则设为未选中状态*/
$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
/*阻止向上冒泡,以防再次触发点击操作*/
event.stopPropagation();
});
/*点击每一行时也触发该行的选中操作*/
$tbr.click(function(){
$(this).find('input').click();
});
}
initTableCheckbox();
});
获取复选框选中数据js如下:
// 获取复选框被选中的数据
$("#link-user-r-btn").on('click', function () {
var checkids = [];
var dataId = [];
var dataName = [];
$("input[name='checkItem']:checked").each(function (i) {
checkids[i] = $(this).val();
});
if (checkids.length <= 0) {
util.error("请至少选择一条记录");
} else {
console.log(checkids);
$("#dgFlowList").find(":checkbox:checked").each(function () {
// var val = $(this).parents("tr").children("input").val();
var val = $(this).parents("tr").children("input[name='sid']").val();
var val1 = $(this).parents("tr").children("input[name='sname']").val();
dataId.push(val);
dataName.push(val1);
});
})