layui 合并表格中相邻且字符同的数据（静态表格）

古城微笑少年丶 2022-02-01 13:53 568阅读 0赞

合并表格的【第一列】相同数据：

![20190514171750871.png][]

//需要自己引入jq
    $(function() {
    	$("#table").rowspan(0); //传入的参数是对应的列数从0开始  第一列合并相同
        //如果想后面的列也合并，就0,1,2,3依次往后推算
    });
    jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
    	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()) {
    					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;
    				}
    			});
    		});
    	});
    }

合并表格中【所有】相同数据：

![20190514172216418.png][]

$(function() {
        tablespan(table);
    })
    
    function tablespan(tb) {
    	//合并行
    	//列
    	for (var i = tb1.rows[0].childNodes.length - 1; i >= 0; i--) {
    		//行
    		for (var j = tb1.rows.length - 1; j > 0; j--) {
    			//当前单元格与上一单元格比较
    			if (tb1.rows[j].childNodes[i].innerHTML == tb1.rows[j - 1].childNodes[i].innerHTML) {
    				tb1.rows[j - 1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;
    				tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);
    			}
    		}
    	}
    
    	//合并列
    	//行
    	for (var i = tb1.rows.length - 1; i >= 0; i--) {
    		break; //不合并列
    		//列
    		for (var j = tb1.rows[i].childNodes.length - 1; j > 0; j--) {
    			//当前单元格与左一单元格比较
    			if (tb1.rows[i].childNodes[j].innerHTML == tb1.rows[i].childNodes[j - 1].innerHTML) {
    				tb1.rows[i].childNodes[j - 1].colSpan += tb1.rows[i].childNodes[j].colSpan;
    				tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);
    			}
    		}
    	}
    }

[20190514171750871.png]: /images/20220201/75150dcb6a5e4fc8ac84e64e5f8b7bc2.png
[20190514172216418.png]: /images/20220201/367f829a57be47cbb6d1918a7fd1c37d.png