本文介绍在 Layui Table 中如何通过 JavaScript 模拟点击复选框来实现行的选中效果。核心思路是利用 data-index 属性定位目标 tr，获取其内部的 layui-form-checkbox 元素并触发 click 事件，从而完成选中操作。
Layui Table 模拟选中 Checkbox 实现
实现思路主要在于通过 data-index 属性定位到被点击的行（tr），进而获取该行下的 div 元素，最后使用 JavaScript 模拟点击操作。
function iniTable()
{
layui.use('table', function(){
var table = layui.table;
//展示已知数据
table.render({
elem: tableid
,cols: [[ //标题栏
{type:'checkbox',id:'goodsLimitSeqNo'}
, {field: 'goodsLimitSeqNo', title: '序号',event: 'setSign', width: 50}
,{field: 'licTypeCode', title: '许可证类别代码',event: 'setSign', width: 140}
,{field: 'licTypeName', title: '许可证类别名称', event: 'setSign',width: 250}
,{field: 'licenceNo', title: '许可证编号', event: 'setSign',width: 150}
,{field: 'licWrtofDetailNo', title: '核销货物序号', event: 'setSign',width: 150}
,{field: 'licWrtofQty', title: '核销数量', event: 'setSign',width:90}
]]
,data: []
,skin: 'line' //表格风格
,even: true
//,page: true //是否显示分页
//,limits: [5, 7, 10]
//,limit: 5 //每页默认显示的数量
});
table.on('edit(goodslicencetable)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
table.on('checkbox(goodslicencetable)', function(obj){
console.log(obj)
});
//监听单元格事件
table.on('tool(goodslicencetable)', function(obj){
var data = obj.data;
// console.log(obj);
if(obj.event == 'setSign'){
$('#customGoodslicfrm').find("input[name='goodsLimitSeqNo']").val(data.goodsLimitSeqNo);
$('#customGoodslicfrm').find("select[name='licTypeCode']").val(data.licTypeCode);
$('#customGoodslicfrm').find("input[name='custom_combobox_input_licTypeCode']").val(data.licTypeCode+'-'+data.licTypeName);
$('#customGoodslicfrm').find("input[name='licenceNo']").val(data.licenceNo);
$('#customGoodslicfrm').find("input[name='licWrtofDetailNo']").val(data.licWrtofDetailNo);
$('#customGoodslicfrm').find("input[name='licWrtofQty']").val(data.licWrtofQty);
var index = data.goodsLimitSeqNo-1;
var td = $('#goodslicencetable').next().find("tr[data-index='"+index+"'] div.layui-form-checkbox");
td.click();
}
});
});
}
var td = $('#goodslicencetable').next().find("tr[data-index='"+index+"'] div.layui-form-checkbox");
td.click();
具体步骤为获取目标 tr 下的 div 元素，并执行模拟 click 动作。
以上关于 Layui Table 通过 JS 模拟选中 checkbox 的示例内容分享完毕，希望能为读者提供参考，并欢迎大家继续支持本站。