layui table 对单元行进行操作

矫情吗；* 2022-11-02 11:40 197阅读 0赞

1. 点击在单元行上，跳转到详情页面

table.on('row(online)',function (obj) {
                localStorage.setItem("signInfo",JSON.stringify(obj.data));
                layer.open({
                    type: 2,
                    title: '打卡详情',
                    content: '../account/form/signDetail.html',
                    maxmin: false,
                    area: ['800px', '680px'],
                    btn: ['取消']
                });
      })

2. 点击某一单元，跳转到详情页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70 1][]

3. 根据单元行某一元素状态，修改该单元行的样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70 2][]

一定要写done中，根据业务修改

done: function (res, index) {
                    let that = this.elem.next();
                    let data = res.data
                    $(data).each(function (i, item) {
                        if(item.status == 10) {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "#F7B500");
                        }
                        if(item.status == 5) {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "#44D7B6");
                        }
                        if(item.status == 11) {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "#6236FF");
                        }
                        if(item.status == 4) {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "#32C5FF");
                        }
                        if(item.urgent == 1) {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "#F22062");
                        }
                        if(item.name == 'SOS订单') {
                            let tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
                            tr.css("background-color", "red");
                        }
                    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021022509520358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70 1]: /images/20221024/da403d593a124c2981c03f819a710c8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lfdm9jZWZlbnJpcg_size_16_color_FFFFFF_t_70 2]: /images/20221024/4e2633d1eda2481e8cef0220d42d851b.png