layui数据表格背景颜色

可以通过设置CSS样式来改变layui数据表格的背景颜色，具体代码如下：

.layui-table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}

.layui-table tbody tr:hover {
background-color: #e6e6e6;
}

这段代码可以让偶数行的背景颜色变为浅灰色，鼠标悬停时背景颜色变为淡灰色。

相关问题

layui 数据表格 表头颜色

你可以使用自定义样式来更改 layui 数据表格表头的颜色。以下是一个例子：

<!-- 引入 layui 样式文件 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.css">

<!-- 自定义样式 -->
<style>
  /* 更改表头背景色 */
  .layui-table thead tr {
    background-color: #009688;
    color: #fff;
  }
</style>

<!-- layui 数据表格代码 -->
<table class="layui-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>城市</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>22</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

<!-- 引入 layui JS 文件 -->
<script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.all.js"></script>

在上面的例子中，我们使用 `.layui-table thead tr` 选择器来选中表格的表头行，并设置了背景色为深绿色，字体颜色为白色。你可以根据需要更改这些属性来自定义你的表头样式。

layui 渲染表格某一行数据背景颜色

您可以使用 layui 的表格渲染功能，通过设置单元格的样式来实现表格某一行的背景颜色。具体实现方式如下：

1. 在表格渲染之前，定义一个回调函数，用于设置单元格的样式。

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) {
        // 设置第二行的背景颜色为 #F2F2F2
        var trElem = $('.layui-table tbody tr:nth-child(2)');
        trElem.css('background-color', '#F2F2F2');
    }
});

在上述代码中，通过 done 回调函数来实现对表格的单元格样式进行设置。

2. 在回调函数中通过 jQuery 选择器选中表格中的某一行，并设置该行单元格的背景颜色。

var trElem = $('.layui-table tbody tr:nth-child(2)');
trElem.css('background-color', '#F2F2F2');

在上述代码中，通过 jQuery 选择器选中表格中的第二行，并设置该行单元格的背景颜色为 #F2F2F2。

通过以上实现方式，您就可以在 layui 的表格中设置某一行的背景颜色了。