js自动合并table相同的行（也适用于自动生成的table）

最新推荐文章于 2023-12-18 17:04:12 发布

djk8888

最新推荐文章于 2023-12-18 17:04:12 发布

阅读量4.1k

点赞数 1

分类专栏： JS代码 html 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/djk8888/article/details/120203325

版权

html 同时被 2 个专栏收录

97 篇文章

订阅专栏

JS代码

76 篇文章

订阅专栏

仅一个 function函数（请直接复制使用）：

 //合并相同行
    function mergeFunc(tableId) {
        var tab = document.getElementById(tableId);        
        var maxCol = 3;//maxcol用于设置需要合并的列数
        var count, start;
        for (var col = maxCol - 1; col >= 0; col--) {
            //用于存储相同个数
            count = 1;
            for (var i = 0; i < tab.rows.length; i++) {
                if (i > 0 && col > 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML
                    && tab.rows[i].cells[col - 1].innerHTML == tab.rows[i - 1].cells[col - 1].innerHTML) {
                    count++;
                } else if (i > 0 && col == 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML) {
                    count++;
                } else {
                    if (count > 1) {
                        //合并
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) { //
                            tab.rows[j].removeChild(tab.rows[j].cells[col]);
                        }
                        count = 1;
                    }
                }
            }
            if (count > 1) { //合并，最后几行相同的情况下
                start = i - count;
                tab.rows[start].cells[col].rowSpan = count;
                for (var j = start + 1; j < i; j++) {
                    tab.rows[j].removeChild(tab.rows[j].cells[col]);
                }
            }
        }
    }

调用方法:

 mergeFunc("table1");//table1是TABLE的id

说明：

var maxCol = 1; //只合并第1列

var maxCol = 2;//合并第1、第2两列

var maxCol = 3;//合并第1、2、3三列

....以此类推....

maxCol 不能大于总列数

完整例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>合并相同行</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            BindTable();
        });
        function BindTable() {
            $("#tbody").empty();
            for (var i = 0; i < 2; i++) {
                var tb = "";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列a</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列a</td><td>第二列b</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";

                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列a</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列a</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列b</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                tb += "<tr><td>第一列b</td><td>第二列b</td><td>第三列c</td><td>第四列</td><td>第五列</td></tr>";
                $("#tbody").append(tb);
            }
            mergeFunc("table1");//合并重复行
        }
        //合并相同行
        function mergeFunc(tableId) {
            var tab = document.getElementById(tableId);
            var maxCol = 3;//maxcol用于设置需要合并的列数
            var count, start;
            for (var col = maxCol - 1; col >= 0; col--) {
                //用于存储相同个数
                count = 1;
                for (var i = 0; i < tab.rows.length; i++) {
                    if (i > 0 && col > 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML
                        && tab.rows[i].cells[col - 1].innerHTML == tab.rows[i - 1].cells[col - 1].innerHTML) {
                        count++;
                    } else if (i > 0 && col == 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML) {
                        count++;
                    } else {
                        if (count > 1) {
                            //合并
                            start = i - count;
                            tab.rows[start].cells[col].rowSpan = count;
                            for (var j = start + 1; j < i; j++) { //
                                tab.rows[j].removeChild(tab.rows[j].cells[col]);
                            }
                            count = 1;
                        }
                    }
                }
                if (count > 1) { //合并，最后几行相同的情况下
                    start = i - count;
                    tab.rows[start].cells[col].rowSpan = count;
                    for (var j = start + 1; j < i; j++) {
                        tab.rows[j].removeChild(tab.rows[j].cells[col]);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <table id="table1" border="1" width="500">
        <thead>
			<tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th><th>第五列</th></tr>
		</thead>
        <tbody id="tbody"></tbody>
    </table>
</body>
</html>

(请直接复制本例,粘贴到html文件中,运行直接看效果....)