Layui table表格单元格合并问题

Layui table表格单元格合并

人丑话不多, 直接上方法:

/*** * @param fieldName  要合并列的field属性值* @param index 表格的索引值 从1开始* @desc 此方式适用于没有列冻结的单元格合并*/
function alarmTableRowSpan(fieldName, index) {var fixedNode = document.getElementsByClassName("layui-table-body")[index - 1];if (!fixedNode) {return false;}var child = fixedNode.getElementsByTagName("td");var childFilterArr = [];// 获取data-field属性为fieldName的tdfor (var i = 0; i < child.length; i++) {if (child[i].getAttribute("data-field") == fieldName) {childFilterArr.push(child[i]);}}// 获取td的个数和种类var childFilterTextObj = {};for (var i = 0; i < childFilterArr.length; i++) {var childText = childFilterArr[i].textContent;if (childFilterTextObj[childText] == undefined) {childFilterTextObj[childText] = 1;} else {var num = childFilterTextObj[childText];childFilterTextObj[childText] = num * 1 + 1;}}// 给获取到的td设置合并单元格属性for (var key in childFilterTextObj) {var tdNum = childFilterTextObj[key];var canRowSpan = true;for (var i = 0; i < childFilterArr.length; i++) {if (childFilterArr[i].textContent == key) {if (canRowSpan) {childFilterArr[i].setAttribute("rowspan", tdNum);canRowSpan = false;} else {childFilterArr[i].style.display = "none";}}}}
}

大家可以试一下亲测是有用的;

Layui table表格单元格合并问题相关推荐

Layui之表格单元格合并
前言 layui是一个不错的后台UI框架,最近一直在学习.但是它原来的表格不支持单元格合并.比如项目这一列,有相同的行,我们就需要合并一下. 就像是这样: 一.实现我们需要在表格实例化之后再对其样式 ...
vue项目element-ui的table表格单元格合并
一.合并效果二全部代码 <template><div class="table-wrap"><el-table:data="tableDa ...
table表格单元格合并，(自定义)
效果图: <template><div class="table"><table border="1" cellspacing=& ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
iview table 求和_iView table 实现单元格合并
前言当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
表格table及单元格合并
表格table 表格常用标签: table:表格 th:表头 tr:表格行 td:单元格数据注意:boder:1; 给表格加边框. 表格常用CSS样式: boder-collpase:collpas ...
html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...
网页中的展示效果如图所示. 数据是从MongoDB里面读取的,在网页的展示方式是使用swig模板引擎,for循环遍历展示的. 伪代码如下: for info in dbInfo {info.cellV ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
table表格单元格的合并详解
1.html实现表格 <el-tablemax-height="300":columns="columns":data="tableData&q ...

Layui table表格单元格合并问题

Layui table表格单元格合并

Layui table表格单元格合并问题相关推荐

最新文章

热门文章