jqueryはテーブル行のテキストの色を変更します

Web 開発では、テーブルは常によく使用される要素の 1 つです。表では、行のテキストの色の変更など、特定の行または列のスタイルを変更する必要がある場合があります。この記事ではjQueryを使ってテーブルの行の文字色を変更する方法を紹介します。

1. テーブルの作成

まず、実験用の簡単なテーブルを作成する必要があります。

<table id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Smith</td>
    <td>40</td>
  </tr>
</table>

2. jQuery を使用してテーブルの行を選択する

次に、jQuery で、セレクターを使用してテーブル内の各行を選択し、そのスタイルを指定する必要があります。この例では、テーブル #myTable 内のすべての奇数行を選択し、そのテキストの色を赤に設定します。

$("#myTable tr:nth-child(odd)").css("color", "red");

このセレクターの意味は次のとおりです: 選択済み #myTableすべての行の奇数行 (つまり、行 1、3、および 5) のテキストの色を赤に変更します。

3. スタイル クラスをテーブル行に追加します

スタイル クラス (highlight など) をテーブル行に追加することもできます。次に、CSS を使用して、スタイル シートでこのクラスのスタイルを定義します。

.highlight {
    background-color: yellow;
}

次に、jQuery で次のコードを使用して、テーブル #myTable 内のすべての行を選択し、 を使用します。 addClass() このメソッドは、クラス名 highlight を持つスタイルを各行に追加します。

$("#myTable tr").addClass("highlight");

この例では、テーブル #myTable 内のすべての行を選択します。 とスタイル クラス highlight を追加します。

4. セル値に基づいてスタイルを変更する

行ごとにスタイルを変更するだけでなく、セル値に基づいてテーブル内のスタイルを変更することもできます。たとえば、次の例では、テーブル #myTable 内の 3 番目の列 (年齢) が 30 以上であるすべてのセルを選択し、そのテキストの色を緑に設定します:

$("#myTable td:nth-child(3)").filter(function() {
    return parseInt($(this).text()) >= 30;
}).css("color", "green");

このセレクターの意味は次のとおりです。テーブル #myTable の列 3 (年齢) のすべてのセルを選択し、filter() メソッドを使用してテキスト変換をフィルターで除外します。セルは 30 以上の整数に変換された後、最終的に文字色が緑色に設定されます。

概要

この記事では、jQuery を使用してテーブルの行の文字色を変更する方法を紹介しました。セレクターを使用してテーブル内の行またはセルを選択し、そのスタイルを変更できます。テーブルを編集する場合、同様の操作を使用して、境界線の色や背景色など、テーブル内の他のスタイル効果を変更することもできます。

実際の開発では、DOM での頻繁な読み取りおよび書き込み操作を避けるために、JavaScript と jQuery のパフォーマンスを最適化する必要があることに注意してください。したがって、複雑なテーブル操作を実装する場合は、操作数を削減したり、テーブル データをキャッシュして処理効率を向上させることを検討できます。

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