layui指定行变色

使用过layUI的小伙伴应该有同感，layUI的表格插件，非常实用，还可以进行行列锁定。项目中遇到一种情况是行根据数据去变色，因为项目是比较古老的ssh项目，查了下文档中发现并没有解决办法，遂手写jq指定行变色，这样子。

不多说，直接上码！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Layui</title>
	<meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>
<table class="layui-hide" id="test"></table>
<button class="btn btn-success" id="submit_btn">已选择</button>
<button class="btn btn-warning" id="change_color">变色</button>
<table lay-filter="tb2">
<thead>
  <tr>
    <th lay-data="{field:'index', type:'checkbox'}"></th>
    <th lay-data="{field:'username'}">Name</th>
    <th lay-data="{field:'sex'}">Sex</th>
    <th lay-data="{field:'age'}">Age</th>
    <th lay-data="{field:'address'}">Address</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td></td>
    <td>张三</td>
    <td>男</td>
    <td>21</td>
    <td>湖南</td>
  </tr>
  <tr>
    <td></td>
    <td>李四</td>
    <td>男</td>
    <td>28</td>
    <td>河北</td>
  </tr>
  <tr>
    <td></td>
    <td>王武</td>
    <td>男</td>
    <td>40</td>
    <td>山东</td>
  </tr>
  <tr>
    <td></td>
    <td>赵六</td>
    <td>男</td>
    <td>88</td>
    <td>西藏</td>
  </tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
//静态初始化
  table.init('tb2', {
    width: 500,
    height: 200,
    limit : 10
  });
});
//001.jq拼接选中复选框索引
$('#submit_btn').click(function(){
  var index = '';
  //i为索引，obj为当前循环对象
  $("input[name='layTableCheckbox']").each(function(i,obj){
    if($(this).is(':checked')){
      index += i + ",";
    }
  });
  alert("已选：" + index);
});
//002.行变色
//其中有一个属性 data-index="0"就是当前
$('#change_color').click(function(){
  $("input[name='layTableCheckbox']").each(function(i,obj){
    if($(this).is(':checked')){
      $("tr[data-index='" + (i - 1) + "']").attr({"style":"background:#5FB878"});  //被选中的行变色
    }else{
      $("tr[data-index='" + (i - 1) + "']").attr({"style":"background:#fff"});    //其他的置成白色
    }
  });
});
</script>
</body>
</html>

简单粗暴的方法是了！直接F12打开控制台，然后用jq选择器选中。

记个笔记，以防用到~

猜你喜欢