テーブルの行番号を自動更新するjQueryの実装-jsチュートリアル-php.cn

テーブルの行番号を自動更新するjQueryの実装

PHPz

リリース： 2024-02-26 16:06:33

オリジナル

751 人が閲覧しました

テーブルの行番号を自動更新するjQueryの実装

jQuery は、Web 開発で広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、データを表示する必要がある状況によく遭遇しますが、テーブルはデータを表示する一般的な方法です。動的テーブルでは、削除、追加、ソートなどの操作が頻繁に行われます。このとき、テーブル内の行数が変化したときに、テーブル内の通し番号を自動的に更新する必要があります。この機能を実現するjQueryの使い方を詳しく紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルの行番号を自動更新するjQueryの実装</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1>表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>

ログイン後にコピー

上記のコードでは、名前と年齢を含むテーブルが最初に作成され、シリアル番号、名前、年齢を含むヘッダーが追加されます。次に、jQuery を使用して、行の追加と行の削除をそれぞれ行う 2 つのイベントリスナーを作成しました。このうち、updateRowNumber 関数は、テーブルの行数が変更されたときに、テーブル内のシリアル番号を自動的に更新するために使用されます。行の追加と行の削除の操作は updateRowNumber 関数を呼び出します。これにより、テーブルの行数が変化したときにシリアル番号が自動的に更新されます。

このコード例を通じて、テーブルの行数が変化したときのシリアル番号の自動更新機能を簡単に実装できるため、データが動的に変化してもテーブルの良好な表示効果を維持できます。

以上がテーブルの行番号を自動更新するjQueryの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。