jQuery を使用して実装: テーブルの行属性を動的に変更する-jsチュートリアル-php.cn

jQuery を使用して実装: テーブルの行属性を動的に変更する

PHPz

リリース： 2024-02-26 14:00:54

オリジナル

1195 人が閲覧しました

jQuery 实例：动态改变表格行的属性值

jQuery は、Web 開発における DOM 操作とイベント処理を簡素化するために使用される人気のある JavaScript ライブラリです。 Web開発ではテーブルの表示や操作が関わることが多く、テーブル行の属性値を動的に変更することは一般的な要件です。この記事では、具体的な例を使用して、jQuery を使用してテーブル行の属性値を動的に変更する方法を説明します。

この例では、学生情報を含むテーブルがあると仮定します。各行は、学生名、学生番号、成績、その他の情報を含む学生を表します。ユーザーが行をクリックしたときに行の背景色を動的に変更できる関数を実装したいと考えています。次に、この機能を段階的に実装していきます。

まず、学生情報を含むテーブルを HTML で定義する必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>Student Information</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('tr').click(function() {
                $(this).css('background-color', 'yellow');
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>001</td>
                <td>90</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>002</td>
                <td>85</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>003</td>
                <td>88</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ログイン後にコピー

上記のコードでは、jQuery の click イベントを使用して、テーブルの行クリックイベントをリッスンします。ユーザーがテーブルの行をクリックすると、click イベントがトリガーされ、jQuery の css メソッドを使用してこの行の背景色を動的に黄色に変更します。

上記のコードにより、ユーザーがテーブル内の行をクリックすると、その行の背景色が黄色に変わり、テーブル行の属性値を動的に変更する効果が得られます。

概要: この例では、jQuery を使用してテーブル行の属性値を動的に変更する方法を示します。この場合、行のクリックイベントは click を通じて監視されます。イベントを作成し、css メソッドを使用して行のスタイルを変更します。上記は、この関数を実装するための具体的なコード例です。この記事が読者にとって役立つことを願っています。

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