layui table添加分割线

最新推荐文章于 2024-09-30 09:30:16 发布

原创最新推荐文章于 2024-09-30 09:30:16 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #table

javaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文介绍了一种在layui框架中为表格元素动态添加边框线的方法，通过遍历表格头的列并设置CSS样式实现分割线效果，适用于需要增强表格视觉区分度的场景。

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

layui table添加分割线

layui.use('table', function(){
		var table = layui.table;
		var group = {};
		group.groupName = $("#groupName").val();
		table.render({
			done: function(res, curr, count){
				var tableView = this.elem.next();
				//设置分割线
                var dataKeyList = [];
                var parentKeyList = [];
                var getChildrenKey = function(key){
                	var keyListTemp = tableView.find(".layui-table-box>.layui-table-header").find("th[data-parentkey='"+key+"']");
                	var keyList = tableView.find(".layui-table-box>.layui-table-header").find("th[data-parentkey='"+key+"']").last();
                	if(keyList && keyList.length>0){
                		for(var i=0; i<keyList.length; i++){
                			var dataKey = keyList[i].getAttribute("data-key");
                			dataKeyList.push(dataKey);
                			var parentKey = dataKey.substring(dataKey.indexOf("-")+1);
                			getChildrenKey(parentKey);
                		}
                	}
                }
                var thList = tableView.find(".layui-table-box>.layui-table-header thead tr").first().find("th");
                for(var i=0; i<thList.length; i++){
                	var dataKey = thList[i].getAttribute("data-key");
                	dataKeyList.push(dataKey);
                	var parentKey = dataKey.substring(dataKey.indexOf("-")+1);
                	getChildrenKey(parentKey);
                }
                for(var i=0; i<dataKeyList.length; i++){
                	tableView.find("[data-key='"+dataKeyList[i]+"']").css("border-right","solid 1px #333333");
                }
			}
		});
	});