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

所属分类: 网络编程 / JavaScript 阅读数: 1859
收藏 0 赞 0 分享

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设置某一行的字体颜色方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

基于jquery封装的一个js分页

基于jquery封装的一个js分页代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

关于js datetime的那点事

关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
收藏 0 赞 0 分享

js 关于=+与+=日期函数使用说明(赋值运算符)

js 关于=+与+=日期函数使用说明(赋值运算符),可以看下,就是一些运算符的使用,看哪个更适合你。
收藏 0 赞 0 分享

JS 操作符整理[推荐收藏]

JS 操作符主要包括算术运算符,赋值运算符,比较(关系)运算符,逻辑运算符,串符(连接作用),条件运算符等
收藏 0 赞 0 分享

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

今天有同事需要这个功能,主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题,特整理了下面的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

Jquery 获取checkbox的checked问题

这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
收藏 0 赞 0 分享

20款效果非常棒的 jQuery 插件小结分享

这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
收藏 0 赞 0 分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下。
收藏 0 赞 0 分享
查看更多