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

 更新时间:2019-09-08 18:01:14   作者:佚名   我要评论(0)

table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单。
首先自定义一个div,内部存放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设置某一行的字体颜色方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • layui table数据修改的回显方法
  • Layui Table js 模拟选中checkbox的例子
  • layui之table checkbox初始化时选中对应选项的方法
  • 使用layui 渲染table数据表格的实例代码
  • layui框架table 数据表格的方法级渲染详解
  • layui 设置table 行的高度方法

相关文章

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

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

    table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单。 首先自定义一个div,内部存放table,根据
    2019-09-08
  • 解决layui的使用以及针对select、radio等表单组件不显示的问题

    解决layui的使用以及针对select、radio等表单组件不显示的问题

    layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率。 使用步
    2019-09-08
  • layer实现弹出层自动调节位置

    layer实现弹出层自动调节位置

    项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现 layer.iframeAuto方法可以实现,这里吐槽一
    2019-09-08
  • JavaScript获取某一天所在的星期

    JavaScript获取某一天所在的星期

    导语: 如何获取今天或者某一天所在星期的开始和结束日期,或者如何获取整个星期的日期 我们会遇到的需求的是,获取今天或者某一天所在星期的开始和结束日期。
    2019-09-08
  • layui中select,radio设置不生效的解决方法

    layui中select,radio设置不生效的解决方法

    废话不多说,大家来看吧! <button class="layui-btn layui-btn-radius" layadmin-event="edit"> <i class="layui-icon">&#xe640;</i>编辑</button>
    2019-09-08
  • JS中比Switch...Case更优雅的多条件判断写法

    JS中比Switch...Case更优雅的多条件判断写法

    前言 前几天,本人负责编写网站上线的环境判断功能,其中涉及到大量多条件判断的code。对于多条件判断写法,大部分程序员都是采用if...else if...else或者
    2019-09-08
  • vue draggable resizable gorkys与v-chart使用与总结

    vue draggable resizable gorkys与v-chart使用与总结

    实现效果: 实现图表的二次封装以及表格的自由拖动,缩放功能 先贴出两个组件的地址: vue-draggable-resizable-gorkys v-chart 图标的二次封装 这里我们先
    2019-09-08
  • layer 刷新某个页面的实现方法

    layer 刷新某个页面的实现方法

    一:使用layer.open打开的子页面 window.parent.location.reload()//刷新父页面 var index = parent.layer.getFrameIndex(window.name)//获取窗口索引 pa
    2019-09-08
  • 解决layer.msg 不居中 ifram中的问题

    解决layer.msg 不居中 ifram中的问题

    在ifram中layer.alert 只展示当前页面 如何让弹框在整个页面中展示 而不是在ifram中 parent.parent.layer.alert('请输入预约人'); 本以为这样就可以 在主
    2019-09-08
  • 关于JS解构的5种有趣用法

    关于JS解构的5种有趣用法

    前言 原文标题:5 Interesting Uses of JavaScript Destructuring 原文链接:dmitripavlutin.com/5-interesti… 定期回顾我写的JS代码,我发现解构运算无处不
    2019-09-08

最新评论