jquery implements table row merging-Front-end Q&A-php.cn

jquery implements table row merging

王林

Release： 2023-05-14 14:20:38

Original

836 people have browsed it

In web development, tables are one of the frequently used elements for displaying multiple pieces of data. But sometimes we need to merge multiple rows of data to display clearer information. This article will introduce how to use jQuery to merge table rows.

Step one: Determine the columns that need to be merged

First we need to determine which columns need to be merged. Typically, we need to consider which columns have the same information and need to merge them.

For example, in the table below, we need to merge the same cells in the second column.

Name	Subject	Achievements
Zhang San	MATHEMATICS	90
李四	MATHEMATICS	80
张三	中文	85
李四	中文	95

Step 2: Write jQuery code

With the columns that need to be merged, we can start writing jQuery code. The idea of the code is to find adjacent cells and merge them if the contents are the same.

The following is the specific code implementation:

function mergeCells(tableID, colList) {
    // 遍历需要合并的列
    for (var colIndex = 0; colIndex < colList.length; colIndex++) {
        var startIndex = 1; // 开始合并的行
        var endIndex = 0;   // 结束合并的行
        var preContent = ''; // 前一个单元格的内容

        // 遍历每一行
        $('#' + tableID + ' tr').each(function(rowIndex) {
            var content = $(this).find('td:eq(' + colList[colIndex] + ')').text(); // 获取当前单元格的内容

            // 判断当前单元格是否需要合并
            if (rowIndex > startIndex && content == preContent) {
                endIndex = rowIndex; // 更新结束合并的行索引
            } else {
                if (endIndex > startIndex) {
                    // 合并单元格
                    $(this).find('td:eq(' + colList[colIndex] + ')').attr('rowspan', endIndex - startIndex + 1);
                    // 隐藏被合并的单元格
                    for (var i = startIndex; i <= endIndex; i++) {
                        $('#' + tableID + ' tr:eq(' + i + ')').find('td:eq(' + colList[colIndex] + ')').hide();
                    }
                }
                // 更新开始合并的行索引和前一个单元格的内容
                startIndex = rowIndex;
                endIndex = rowIndex;
                preContent = content;
            }
        });
    }
}

Copy after login

The above code will traverse the specified columns in the table, find the same cells and merge them. Among them, tableID is the id of the table, and colList is the index list of columns that need to be merged.

Step 3: Call the function to merge rows

We can call the mergeCells function to merge table rows after the page is loaded.

For example, add the following code to the page:

<body>
    <table id="myTable">
        <tr>
            <th>姓名</th>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>数学</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>数学</td>
            <td>80</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>语文</td>
            <td>85</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>语文</td>
            <td>95</td>
        </tr>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            mergeCells('myTable', [1]);
        });
    </script>
</body>

Copy after login

In this way, the table rows can be merged.

Summary:

This article introduces the use of jQuery to merge table rows. By writing functions to find adjacent cells, merge and hide them, you can easily achieve the display effect of the table.

Of course, not only merging rows, we can also learn from similar ideas to implement other complex table operations.

The above is the detailed content of jquery implements table row merging. For more information, please follow other related articles on the PHP Chinese website!