layui 渲染指定id表格某一行数据背景颜色
时间: 2023-08-08 19:14:15 浏览: 467
和上面的实现方式相比,这里需要指定表格的id,然后根据id选择器选中指定的表格,并且设置指定行的背景颜色,代码如下:
```javascript
var table = layui.table;
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID', width:80},
{field: 'username', title: '用户名', width:120},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
data: tableData,
done: function(res, curr, count) {
// 设置id为demo的表格中第二行的背景颜色为 #F2F2F2
var tableElem = $('#demo');
var trElem = tableElem.next('.layui-table-view').find('tbody tr:nth-child(2)');
trElem.css('background-color', '#F2F2F2');
}
});
```
在上述代码中,通过 `$` 函数选中 id 为 demo 的表格,然后通过 `next` 方法选中表格的兄弟元素 `.layui-table-view`,再通过 `find` 方法选中该兄弟元素下的第二行,并设置该行单元格的背景颜色为 #F2F2F2。
这样,您就可以实现在指定 id 的 layui 表格中设置某一行的背景颜色了。
阅读全文