jQuery のヒント: テーブルの行プロパティを変更する方法-jsチュートリアル-php.cn

jQuery のヒント: テーブルの行プロパティを変更する方法

WBOY

リリース： 2024-02-27 17:27:03

オリジナル

955 人が閲覧しました

jQuery のヒント: テーブルの行プロパティを変更する方法

タイトル: jQuery のヒント: テーブルの行プロパティを変更する方法

本文:

Web 開発では、テーブルはよく使用される要素の 1 つです。 jQuery を通じてテーブルの行属性を変更すると、ページをよりインタラクティブで動的にすることができます。この記事では、jQuery を使用してテーブルの行プロパティを変更するいくつかの方法を紹介し、具体的なコード例を示します。

1. テーブルの行にホバー効果を追加する
マウスをテーブルの行の上に置いたときに行の背景色を変更する効果を実現するには、次のコードを使用します:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        tr:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

ログイン後にコピー

2. 条件に基づいてテーブル行の色を変更する
値のサイズに基づいて異なる色を表示するなど、特定の条件に基づいてテーブル行のスタイルを変更する必要がある場合があります。次のコードは、データのサイズに基づいてテーブル行の背景色を変更する方法を示しています:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr").each(function(){
                var value = parseInt($(this).find("td:last").text());
                if(value > 50){
                    $(this).css("background-color", "green");
                } else {
                    $(this).css("background-color", "red");
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>数据1</td>
            <td>60</td>
        </tr>
        <tr>
            <td>数据2</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>

ログイン後にコピー

上記は、jQuery を使用してテーブル行のプロパティを変更する 2 つの一般的な方法です。ウェブページをより美しく、よりダイナミックに。この記事の内容があなたのお役に立てば幸いです!

以上がjQuery のヒント: テーブルの行プロパティを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。