layui table 更改隔行颜色

最新推荐文章于 2023-05-17 16:00:46 发布

码农新锐

最新推荐文章于 2023-05-17 16:00:46 发布

阅读量1.8k

点赞数 1

分类专栏： layui 文章标签： table css

本文链接：https://blog.csdn.net/qq_31984879/article/details/109773797

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、使用jquery

done: function (res, curr, count) {// 表格渲染完成之后的回调
$view.find('th').css({'background-color': '#00008B', 'color': '#fff','font-weight':'bold'})
var that = this.elem.next();
res.data.forEach(function (item, index) {
if (index%2 == 0) {
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#34209f");
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("color", "#fff");
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("font-weight", "bold");
} else {
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#00008B");
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("color", "#fff");
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("font-weight", "bold");
}
});
}

2、使用css，为什么会想起用css呢，因为使用js变颜色，点击查询会出现闪动的情况。使用css不会出现这个问题。

<style>

.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
background-color: #00008B!important;
color:#fff;
font-weight:bold;
}
.layui-flow-more a cite:hover{opacity:.8}.layui-flow-more a i{font-size:30px;color:#737383}.layui-table{width:100%;background-color:#34209f;color:#fff;font-weight:bold;}

</style>

头部颜色还是用js解决

$view.find('th').css({'background-color': '#00008B', 'color': '#fff','font-weight':'bold'})