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

 更新时间:2019年09月05日 12:01:05   作者:cp1300  
今天小编就为大家分享一篇layui table设置某一行的字体颜色方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

相关文章

  • javascript操作数组详解

    javascript操作数组详解

    这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
    2014-12-12
  • 避免回车键导致的页面无意义刷新的解决方法

    避免回车键导致的页面无意义刷新的解决方法

    相信大家在实现页面局部刷新过程中都遇到过类似的问题:在文本框中输入完要搜索的关键字段,按回车结果整个页面刷新了,局部刷新肯定失败。
    2011-04-04
  • 为网站代码块pre标签增加一个复制代码按钮代码

    为网站代码块pre标签增加一个复制代码按钮代码

    写文章的时候,作为一名专业的码农,经常会在文章中粘贴一些代码。有的时候代码块比较长,在后期使用中需要复制这段代码就比较麻烦
    2021-11-11
  • JavaScript实现好看的跟随彩色气泡效果

    JavaScript实现好看的跟随彩色气泡效果

    这篇文章主要为大家详细介绍了JavaScript实现好看的跟随彩色气泡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • javascript实现页面的实时时钟显示示例

    javascript实现页面的实时时钟显示示例

    这篇文章主要介绍了javascript实现页面的实时时钟显示示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript 限制文本框不可输入英文单双引号的方法

    JavaScript 限制文本框不可输入英文单双引号的方法

    这篇文章主要介绍了JavaScript 限制文本框不可输入英文单双引号的方法的相关资料,需要的朋友可以参考下
    2016-12-12
  • 鼠标滚轮编程

    鼠标滚轮编程

    鼠标滚轮编程...
    2007-01-01
  • 用svg制作富有动态的tooltip

    用svg制作富有动态的tooltip

    这篇文章主要介绍了用svg制作富有动态的tooltip的代码以及制作过程,十分的细致全面,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript如何监测数组的变化

    JavaScript如何监测数组的变化

    最近在造轮子的时候遇到了这么一个问题,那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化,这篇文章主要给大家介绍了关于JavaScript如何监测数组变化的相关资料,需要的朋友可以参考下
    2021-07-07
  • JS实现仿PS的调色板效果完整实例

    JS实现仿PS的调色板效果完整实例

    这篇文章主要介绍了JS实现仿PS的调色板效果,结合完整实例形式分析了javascript通过运算与动态操作页面元素实现调色板功能的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-12-12

最新评论