编写一个js函数,当layui table中选择checkbox,则行颜色变为黄色
时间: 2024-11-30 10:21:45 浏览: 18
在layui表格中,你可以通过监听table的`check`事件来实现在用户选择checkbox时改变行的颜色。这里是一个简单的示例,假设你已经引入了layui库并且有一个名为`layTable`的table元素:
```javascript
layui.use('laytable', function(){
var laytable = layui.laytable;
// 初始化表格并设置默认样式
laytable.render({
elem: '#layTable', // 表格容器id
data: yourData, // 表格数据
cols: [
{ field: 'name', title: '姓名' },
{ field: 'email', title: '邮箱' },
{ field: 'checked', checkbox: true } // 添加一个复选框列
],
init: {
check: { // 初始化配置,设置默认所有行不可选
enable: false,
callback: function(data){
changeRowColor(data); // 当用户交互时,调用此函数改变行色
}
}
}
});
// 定义改变行色的函数
function changeRowColor(data){
for (var i = 0; i < data.length; i++) {
if (data[i].checked) { // 如果当前行被选中
$('#layTable tr').eq(i).css('background-color', 'yellow'); // 改变背景色为黄色
} else {
$('#layTable tr').eq(i).css('background-color', ''); // 取消选中时恢复原色(这里可以设为透明或其他颜色)
}
}
}
});
```
在这个例子中,当你点击checkbox时,`changeRowColor`函数会被调用,检查每一行是否被勾选,如果被勾选则将该行的背景色改为黄色。
阅读全文