layui合并表格的单元格合并列或行的两种方法

注意：两种方法要求layui表格的单元格中没有使用fixed属性，不然代码不会起效
方法一：

 /**
* 合并单元格（列）
* @param res 表格数据
* @param curr 当前页
* @param count 总数
*/
function merge(res, curr, count) {var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数var columsName = ['dangci'];//需要合并的列名称var columsIndex = [0];//需要合并的列索引值for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列{var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列if (data[i][columsName[k]] == data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并mark += 1;tdPreArr.each(function () {//相同列的第一列增加rowspan属性$(this).attr("rowspan", mark);});tdCurArr.each(function () {//当前行隐藏$(this).css("display", "none");});}else {mergeIndex = i;mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算}}}
}

方法二：

jQuery.fn.rowspan = function (colIdx) {return this.each(function () {var that;$('tr', this).each(function (row) {$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {if (that != null && $(this).html() == $(that).html()) {var rowspan = $(that).attr("rowspan");if (rowspan == undefined) {$(that).attr("rowspan", 1);rowspan = $(that).attr("rowspan");}rowspan = Number(rowspan) + 1;$(that).attr("rowspan", rowspan);$(this).hide();} else {that = this;}});});});
};
//封装jQuery小插件用于合并相同内容单元格(列)
jQuery.fn.colspan = function (colIdx, index) { return this.each(function () {$('tr', this).each(function (row) {$('td:eq(' + colIdx + ')', this).each(function (col) {if ($(this).text() == $(this).next().text()) {$(this).attr("colspan", index);// $(this).attr("colspan");//$(this).text("<div class='layui-table-cel>" + $(this).text() + "</div>");$(this).text($(this).text());$(this).next().hide();}});});});
};调用举例：
$('.layui-table').rowspan(0);//合并第一列中相同的行
$('.layui-table').colspan(1, 2);//合并第二行至第三行中相同的列

layui合并表格的单元格合并列或行的两种方法相关推荐

cxgrid中纵横单元格合并_逆向查询合并单元格中的数据，这两种方法你值得拥有...
有同事询问了一个问题,说下面的这种表格,我有部门和人员的清单列表,如果我想根据人员清单去查询其所在的部门要怎么实现呢? 因为部门列的数据内容是经过合并的,如果我们直接使用Vlookup进行查找,查找 ...
在单元格中进行Excel换行的两种方法和取消换行符的方法
我想打破Excel中的字符串! 如何破坏单元格中的字符串? 如果要将输入的文本换行到Excel单元格,有时会看到键入大量空间并强行提供行的情况,但效率非常低.让我们来看看如何做一个整洁的细胞休息. 如 ...
Aspose.Words for .NET使用表格教程之水平和垂直合并表格中单元格
Aspose.Words For .Net是一种高级Word文档处理API,用于执行各种文档管理和操作任务.API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsof ...
Excel将合并后的单元格恢复成多行并添加数据
我们在工作过程中经常遇到合并单元格,但是合并后的单元格再恢复成原来的样子该怎么操作呢如图,将所属区域恢复成单行,兵补充文字 1.全部选中,取消合并单元格 2.通过定位获取到所属区域的空白单元格定位 ...
【记录】 layui导出表格设置单元格格式
今天写项目时,一个导出Excel的需求:需要设置导出的Excel表格内容居中,并且设置单元格列宽.现在记录一下,大佬勿喷.代码如下: //设置excel表格列宽var colConf = excel. ...
excel不显示0_单元格为0不显示的几种方法
在设计表格,呈现报表的时候,通常为了表格的简洁会让一起没必要的东西不显示出来,比如单元格值为0时需要不显示今天小才子介绍几种让单元格为0时不显示的方法一.选项设置方法在EXCEL中,找到文件-E ...
服务器里文件表格如何自动备份,Excel电子表格自动备份的两种方法
对于数据量大.数据重要性高的EXCEL文件,如果出现任何意外导致数据遭受损坏,那么,将是一件严重的问题. 平时我们在操作EXCEL时,应该养成良好的习惯,即让EXCEL自动备份,以防不测. 以下是两种 ...
在word里，毕业论文和开题报告的参考文献目录如何设置成第二行空两格的格式？（介绍两种方法）
下面介绍两种方法 (1)全选中参考文献→开始→编号(如图1)→点最下面的"自定义编号"→选一个编号完之后两行头头都是平行的数字编号(如图2)→然后点右下方的"自定义&qu ...
rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...

layui合并表格的单元格合并列或行的两种方法

layui合并表格的单元格合并列或行的两种方法相关推荐

最新文章

热门文章

layui合并表格的单元格 合并列或行的两种方法

layui合并表格的单元格 合并列或行的两种方法相关推荐

最新文章

热门文章

layui合并表格的单元格合并列或行的两种方法

layui合并表格的单元格合并列或行的两种方法相关推荐