jqueryはテーブル行のマージを実装します-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryはテーブル行のマージを実装します

王林

May 14, 2023 pm 02:20 PM

Web 開発では、テーブルは複数のデータを表示するために頻繁に使用される要素の 1 つです。ただし、より明確な情報を表示するために、複数行のデータを結合する必要がある場合があります。この記事では、jQueryを使ってテーブルの行を結合する方法を紹介します。

ステップ 1: マージする必要がある列を決定する

まず、どの列をマージする必要があるかを決定する必要があります。通常、どの列に同じ情報が含まれているかを考慮し、それらをマージする必要があります。

たとえば、以下の表では、2 列目の同じセルを結合する必要があります。

名前	件名	業績
張三	数学	90
李四	数学	80
#张三	中文	85
李四	中文	95

ステップ 2: jQuery コードを作成する

マージする必要がある列を使用して、jQuery コードの作成を開始できます。コードの考え方は、隣接するセルを見つけて、内容が同じ場合にそれらを結合することです。

以下は具体的なコードの実装です:

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;
            }
        });
    }
}

ログイン後にコピー

上記のコードはテーブル内の指定された列を走査し、同じセルを見つけて結合します。このうち、tableID はテーブルの ID で、colList はマージする必要がある列のインデックスリストです。

ステップ 3: 関数を呼び出して行を結合する

ページが読み込まれた後に、mergeCells 関数を呼び出してテーブルの行を結合できます。

たとえば、次のコードをページに追加します。

<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>

ログイン後にコピー

この方法で、テーブルの行を結合できます。

概要:

この記事では、jQuery を使用してテーブルの行を結合する方法を紹介します。隣接するセルを検索し、結合して非表示にする関数を記述することで、表の表示効果を簡単に実現できます。

もちろん、行を結合するだけでなく、同様のアイデアから学び、他の複雑なテーブル操作を実装することもできます。

以上がjqueryはテーブル行のマージを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。