JS单元格合并

最新推荐文章于 2024-08-29 18:21:18 发布

简单的绿竹

最新推荐文章于 2024-08-29 18:21:18 发布

阅读量4.2k

点赞数

分类专栏： JS Jquery html

本文链接：https://blog.csdn.net/zunguitiancheng/article/details/121923737

版权

HTML表格单元格合并 JavaScript CSS样式前端开发

关键词由CSDN通过智能技术生成

JS 同时被 3 个专栏收录

122 篇文章 0 订阅

订阅专栏

Jquery

45 篇文章 0 订阅

订阅专栏

html

33 篇文章 0 订阅

订阅专栏

https://www.cnblogs.com/qlqwjy/p/9048317.html

　在Web中经常需要合并单元格，例如对于下面一个表格:

复制代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table,
            table tr th,
            table tr td {
                border: 1px solid #0094ff;
            }
        </style>
    </head>

    <body>
        <table style="border: 1px;" id="test1">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                    <th>表头4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>列1</td>
                    <td>列2</td>
                    <td>列3</td>
                    <td>列4</td>
                </tr>
                <tr>
                    <td>列1</td>
                    <td>列2</td>
                    <td>列3</td>
                    <td>列4</td>
                </tr>
                <tr>
                    <td>列1</td>
                    <td>列2</td>
                    <td>列3</td>
                    <td>列4</td>
                </tr>
            </tbody>
        </table>

    </body>

</html>

复制代码

表格原来样式:

合并的JS方法:(可以作为一个工具方法)

1.纵向合并，也就是对同一列的相邻行单元格相同的进行合并

复制代码

            /**
             * 合并单元格(如果结束行传0代表合并所有行)
             * @param table1    表格的ID
             * @param startRow  起始行
             * @param endRow    结束行
             * @param col   合并的列号，对第几列进行合并(从0开始)。第一行从0开始
             */
            function mergeCell(table1, startRow, endRow, col) {
                var tb = document.getElementById(table1);
                if(!tb || !tb.rows || tb.rows.length <= 0) {
                    return;
                }
                if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {
                    return;
                }
                if(endRow == 0) {
                    endRow = tb.rows.length - 1;
                }
                for(var i = startRow; i < endRow; i++) {
                    if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { //如果相等就合并单元格,合并之后跳过下一行
                        tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);
                        tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;
                    } else {
                        mergeCell(table1, i + 1, endRow, col);
                        break;
                    }
                }
            }

复制代码

例如上面:

mergeCell('test1', 0, 0, 3);

结果

补充:如果想合并多列可以多次调用此方法，但是需要注意先合并后面的列，再合并前面的列

(1)合并多列正确用法

    mergeCell('test1', 0, 0, 3);
    mergeCell('test1', 0, 0, 2);
    mergeCell('test1', 0, 0, 1);

(2)如果先合并前面的列查看效果

    mergeCell('test1', 0, 0, 1);
    mergeCell('test1', 0, 0, 2);
    mergeCell('test1', 0, 0, 3);