layui table设置某一行的字体颜色方法


Posted in Javascript onSeptember 05, 2019

table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单。

首先自定义一个div,内部存放table,根据class找到table,然后找到行tr,修改其样式中的颜色。

//设置layui datatable的某一行的颜色
  //TabDivId:tab父div id;RowIndex:行序列号,从0开始;ColorString:颜色字符串,如'#123456'
  function Layui_SetDataTableRowColor(TabDivId,RowIndex, ColorString)
  {
    try
    {
      var div = document.getElementById(TabDivId);
      if(div != null) //找到对象了
      {
        var table_main = div.getElementsByClassName('layui-table-main');  //通过class获取table_main
        if (table_main != null && table_main.length > 0)
        {
          var table = table_main[0].getElementsByClassName('layui-table');  //通过class获取table
          if (table != null && table.length > 0) {
            var trs = table[0].querySelectorAll("tr");
            if (trs != null && trs.length > 0) {
              trs[RowIndex].style.color = ColorString;
            }
          }
        }
        
      }
    }
    catch(e)
    {
      console.log(e.message);
    }
  }

注意调用时必须要等table渲染完成后进行调用,可以放到渲染完成事件中调用。

, done: function (res, curr, count) {
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);
 
    //得到当前页码
    console.log(curr);
 
    //得到数据总量
    console.log(count);
 
    Layui_SetDataTableRowColor('tabl_panel_id1', 0, '#2c08b1');
  }

最终效果如下:

layui table设置某一行的字体颜色方法

第一行的颜色变为你想设置的颜色了。

以上这篇layui table设置某一行的字体颜色方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 #Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
layui动态加载多表头的实例
Sep 05 #Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 #Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
You might like
php适配器模式介绍
2012/08/14 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
js+css实现打字效果
2020/06/24 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
英语专业学生的自我评价
2013/12/30 职场文书
工程专业应届生求职信
2014/02/19 职场文书
世界读书日的活动方案
2014/08/20 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年父亲节寄语
2015/03/23 职场文书