layui之给动态表格某个符合条件的单元格加颜色或背景（角标）

最新推荐文章于 2023-06-25 18:25:32 发布
最新推荐文章于 2023-06-25 18:25:32 发布
阅读量3.7k 收藏 9
点赞数 4
分类专栏： layui 文章标签： layui 表格单元格添加颜色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630616/article/details/103121048
版权
  1. 效果：已过期这个角标是一个背景图片
    在这里插入图片描述
    在这里插入图片描述
  2. 代码
 //给单元格标注颜色
        done: function (res, page, count) {
            var that = this.elem.next();
            res.data.forEach(function (item, index) {
                if (new Date(item.deadline) < new Date()) {//判断条件，符合条件给角标 
                //更具自己需要加颜色或角标
                    var td = that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='deadline']").css("background-color", "#a6d792");//给单元格添加颜色
                    var td = that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='deadline']").css("background", "url('../../images/timg.png') no-repeat");//给单元格添加背景图片
                }
            });

  1. 附赠一个图片（大小不合适的话请自行p图）
    在这里插入图片描述

  2. 图标连接

    https://www.iconfont.cn/

biu~~~~~
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
layui 自用问题记录
Astpiy的专栏
07-09 369
1.表单验证 手机端无法聚焦 ---可在验证标签内 添加 lay-verType="tips" 吸附式提醒 其样式位置： static/layui-v2.5.6/layui/css/modules/layer/default/layer.css 样式名称：.layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR 提示框角标 颜色：border-bottom-color ...
layui渲染表格使得某个单元格背景颜色按照要求进行变色
qq_34309663的博客
12-12 3719
最近需要实现一个功能，根据返回的值的情况，使得layui某个单元格显示特定的颜色。下面我将解决思路和碰到的坑给大家讲一下 html前端页面是这个样子的 在前面的html页面里面的写法是这个样子的 现在就是假设需要实现这样的功能，在表的姓名列，如果返回某个特定的名字，就设置这个单元格背景为红色，不是设置这一整行为红色！ 起初我的想法就是使用$("#trainList")的方法选中这个table，然后遍历这个表的行和列，然后再设置样色样式，然而选中的情况是只有一行。 原因可能...
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
今天小编就为大家分享一篇在Layui中操作数据表格,给指定单元格添加事件示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表格动态添加|layui表格可编辑
08-24
layui表格动态添加|layui表格可编辑动态添加
Layui数据表格之单元格编辑方式
10-16
今天小编就为大家分享一篇Layui数据表格之单元格编辑方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 数菜单插件
06-14
功能说明：（详细使用方式在下面的文档中） 1、常规tree，无层级限制； 2、增加checkbox复选框； 3、两种数据绑定方式，json数组/异步数据接口，优化了数据格式； 4、节点默认选中状态； 5、节点是否可用； 6、父级节点拥有其子级节点全选功能； 7、父级节点监听子级节点选中状态，并更改自身状态； 8、加载等待提示； 9、加载完毕后的初始展开状态； 10、三种节点图标样式自定义设置，取自layui图标； 11、三种节点图标颜色自定义配色； 12、全选框； 13、全选框状态更改触发的监听事件自定义； 14、节点状态更改的监听事件自定义（节点点击事件，不包含全选框）； 15、可自动撑起容器高度，容器最小高度100px； 16、解决单页面多个xtree冲突的问题； 17、如layui一样简单的使用方式； 提供四种方法： 1、获取全部[选中的][末级节点]原checkbox DOM对象，返回Array 2、获取全部原checkbox DOM对象，返回Array 3、通过value值找父级DOM对象，顶级节点与错误值均返回null 4、更新数据，重新渲染，无返回值
layui使用数据表格实现类似购物车功能
爱折腾的程序员
03-12 5175
layui数据表格实现类似购物车功能
关于layui数据表格如何改变单元格颜色的实践
icecoolr1的博客
05-22 5305
这学期大作业要求一个用户管理模块，现有一个需求要求我们能够通过颜色区分用户的状态 最终实现效果 解决过程 一开始看很多CSDN的老哥使用的是success回调函数进行处理，但是可能是我太菜了，整了半天没整明白，最后通过阅读layui官方文档，意外发现贤心大佬的一段话: 短短几句话貌似正好解决了我们的需求，最后看到官方演示力度示例: 再看源代码 贤心大佬在这使用的是layui使用的是layui的模板引擎laytpl，相当神奇且强大，那么要实现我们的功能，我们只需要在我.
根据不同的值表格单元格显示不同的背景色
qq_45021462的博客
01-05 1405
<el-table id="table" :data="tableData" border style="width: 100%;height: 100%;" :header-cell-style="{ color: '#333', 'font-weight': '500'
layui数据表格设置行颜色
热门推荐
weixin_41565034的博客
05-08 2万+
table自带的可以设置某一个单元格颜色，必须根据内容来修改，对于很多列同时修改并不方便，直接使用js操作比较简单。 首先自定义一个div，内部存放table，根据class找到table，然后找到行tr，修改其样式中的颜色。 //设置layui datatable的某一行的颜色 //DivId:datatable父div的 id;RowIndex:行序列号；Color：颜色字符串...
在table表格中实现圆角效果
xxtz0522的博客
11-07 1647
参考：https://www.cnblogs.com/phermis/p/7059894.html
layui 实现表格某一列显示图标
10-16
今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui导入 加载动画_厉害了！这个免费神器帮你无脑做施工动画
weixin_39765280的博客
11-22 265
​你好，这里是 BIMBOX。今天诚意给你安利一款好用免费的施工动画软件。很多施工企业在建完模型后，都会用模拟动画的形式展示施工方案流程、做施工方案可视化评审、质量安全交底等。施工模拟动画这两年也成了项目BIM落地应用的重要组成。用施工模拟动画做方案交底可以让管理人员和施工人员更清晰的了解施工作业的重点和难点，理解工艺流程。通过对复杂情况的预判，可以及时调整施工部署。当然，领导要求看动画、投标要求...
【html】在消息按钮上增加数量角标
柠檬加冰
05-19 1万+
html代码：<a onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-bell-o fa-2x',size:'large',iconA
layui 设置table单元格背景色
weixin_38404507的博客
04-20 8112
我想要实现这样的效果： 根据不同的评价内容设置不同的背景色。 在done回调函数中写如下代码： done: function (res, curr, count) { res.data.forEach(function (item, index) { if (item.Estimate == 0) $('div[lay-id="quality"]'). find('tr[dat...
layui+树结构表格+动态单元格加背景色
weixin_40259178的博客
04-28 3840
Html: <div class="layui-btn-group"> <button class="layui-btn" id="btn-expand">全部展开</button> <button class="layui-btn" id="btn-fold">全部折叠</button> ...
layui框架学习（4：导航）
gc_2299的博客
01-31 2558
学习并记录layui框架中页面元素的导航相关内容。
Layui框架实战基础(增删改查)表格表单(一) 根据后台返回颜色字段修改表格背景颜色
m0_65607651的博客
06-25 1584
Layui框架实战基础(增删改查)表格表单(一) 根据后台返回颜色字段修改表格背景颜色
layui单元格标红
weixin_43718143的博客
05-22 961
table.render({ elem: '#test' ,height: 'full-200' ,url:'${path}/mingdong/mingdongfdj.action' ,page:true ,limit:10 ,limits:[10,20] ,toolbar:'#tian
layui 动态添加编辑表格单元格
最新发布
08-02
在layui中，动态添加和编辑表格单元格可以通过两种方式实现。 第一种方式是使用layui的表格渲染方法render()。首先，我们可以创建一个table标签，并设置id，如下所示： ``` <table id="demo" lay-filter="test"></table> ``` 然后，通过调用layui的table.render()方法，传入一个配置对象来渲染表格，如下所示： ``` table.render({ elem: '#demo', data: data, cols: [[ {field: 'name', title: '姓名', edit: 'text'}, {field: 'age', title: '年龄', edit: 'text'}, {field: 'score', title: '分数', edit: 'text'}, ]], }); ``` 在cols对象中，我们设置了三个单元格，每个单元格都可以编辑。通过设置edit属性为'text'，我们将单元格设置为可编辑文本框。接下来，我们需要通过调用table.reload()方法来动态添加单元格数据，如下所示： ``` table.reload('demo', { data: newData, }); ``` 其中，'demo'是需要重新加载的表格id，newData是新的数据。通过这种方式，我们可以动态添加和编辑表格中的单元格。 第二种方式是使用layui的form模块。我们可以创建一个table标签和一个form标签，并设置id，如下所示： ``` <table id="demo" lay-filter="test"></table> <form class="layui-form" lay-filter="dataForm"></form> ``` 然后，我们可以通过调用form.render()方法，传入一个配置对象来渲染表单，如下所示： ``` form.render(null, 'dataForm'); ``` 在表格中添加数据按钮的点击事件中，我们可以通过调用form.val()方法来动态向表单中添加数据，如下所示： ``` form.val('dataForm', { name: '张三', age: 18, score: 90, }); ``` 其中，'dataForm'是表单的lay-filter属性值，name、age、score是表单中的字段名，'张三'、18、90是字段对应的值。通过这种方式，我们可以动态添加和编辑表格中的单元格。 以上就是在layui中动态添加和编辑表格单元格的两种方式，可以根据具体需求选择适合的方式进行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值