layui table表格自定义样式排序或翻页后样式丢失解决方案

原创于 2019-03-26 09:13:12 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript为layui表格动态添加样式的实现方法。通过监听表格排序事件及完成加载事件来更新表格行的样式，如改变文字颜色和添加删除线效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说直接上代码

//监听排序 调用加样式的方法
	table.on('sort()', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  //注意 这里的参数是表格的缓存数据
		addstyle(table.cache.tablelist);
	});
	//在表格的done里面也要调用一下加样式的方法
	done: function(res, curr, count){
		      //置顶加样式 注意 这里的参数是表格的缓存数据
		addstyle(table.cache.tablelist); 
		    }
//给表格加样式
	function addstyle(tablecachedata) {
		//具体要加的样式写在循环里面 在循环里面根据你自己的条件判断哪行加样式
        $.each(tablecachedata,function(index,value){
				//tablelist改成你自己表格的名字
        		$('div[lay-id=tablelist]').find('.layui-table-main').find("tr[data-index="+index+"]").css("color","#ADADAD");
        		$('div[lay-id=tablelist]').find('.layui-table-main').find("tr[data-index="+index+"]").css("text-decoration","line-through");

       });
	}