Jquery のヒント: テーブル内の交互の行の背景色を交互に変更する方法-jsチュートリアル-php.cn

Jquery のヒント: テーブル内の交互の行の背景色を交互に変更する方法

WBOY

リリース： 2024-02-28 10:12:04

オリジナル

529 人が閲覧しました

Jquery のヒント: テーブル内の交互の行の背景色を交互に変更する方法

タイトル: JQuery のヒント: テーブルの背景色を交互の行で実現する方法

Web 開発では、テーブルはよく使用される要素の 1 つです。多くの場合、表のスタイルを最適化し、ページの美しさと読みやすさを向上させるために必要です。その中で、表の背景色を行ごとに交互にすることは共通の要件であり、背景色を交互にすることで表をより鮮明にすることができます。この記事では、JQueryを使ってテーブルの一行おきの背景色を交互に実現する方法を、具体的なコード例を添えて紹介します。

実装方法:

JQuery のセレクターとトラバーサルメソッドを使用すると、テーブル内の行ごとに背景色を交互に変える効果を簡単に実現できます。

まず、JQuery ライブラリを HTML ファイルに導入します (CDN 経由で導入することも、ローカルファイルにダウンロードすることもできます)。 JQuery ライブラリを導入すると、<script> タグ内に JQuery コードを記述できるようになります。 </script>
交互の背景色を実現する必要があるテーブル内の行に、特定のクラス名または識別子を追加します。たとえば、偶数番号の行に「偶数行」のクラスを追加できます。奇数行に「odd-」のクラス。row」。
JQuery セレクターを使用して、背景色を追加する必要がある行を選択し、JQuery が提供するメソッドを通じて、対応する背景色スタイルをこれらの行に追加します。

具体的なコード例:

次は、JQuery を使用してテーブル内の代替行の代替背景色を実装する方法を示す簡単な例です。 ##

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格隔行交替背景色</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
    .even-row {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>

<table id="myTable">
    <tr><td>行1</td></tr>
    <tr><td>行2</td></tr>
    <tr><td>行3</td></tr>
    <tr><td>行4</td></tr>
</table>

<script>
    $(document).ready(function() {
        $("#myTable tr:even").addClass("even-row");
    });
</script>

</body>
</html>

ログイン後にコピー

上記のコードでは、JQuery のセレクター「:even」を使用してテーブル内の偶数行を選択し、これらの行に「even-row」クラスを追加します。これにより、背景色を交互に変える効果が得られます。交互の行。

上記のコード例を通じて、JQuery を使用してテーブル内の行ごとに交互の背景色を実現することが、シンプルで効果的な方法であることがわかります。この方法はシンプルで効率的であるだけでなく、より美しく読みやすい視覚効果をテーブルに追加します。この記事が困っている読者に役立ち、Web テーブルの表示効果を向上させることができれば幸いです。

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