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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
js实现炫酷光感效果
Sep 05 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php微信公众号开发模式详解
2016/11/28 PHP
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
小程序实现长按保存图片的方法
2019/12/31 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
浅析Python中的多条件排序实现
2016/06/07 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python守护进程实现过程详解
2020/02/10 Python
python实现学生管理系统开发
2020/07/24 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
产品促销活动策划书
2014/01/15 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python中基础数据类型 set集合知识点总结
2021/08/02 Python