Jquery を使用してテーブル内の行を 1 つおきに色を変える効果を実現する

JQuery を使用してテーブル内の交互の行の色を変える効果を実現する

Web 開発では、ユーザー エクスペリエンスを向上させるために、テーブルを美しく最適化することがよくあります。 。その中でも、表内の行を 1 つおきに色を変える効果は一般的で簡単な操作であり、表をより整然と美しくすることができます。この記事では、JQuery を使用してテーブル内の行を交互に色を変える効果を実現する方法を紹介し、具体的なコード例を添付します。

1. 準備

始める前に、JQuery ライブラリが接続されていることを確認する必要があります。次のコードを タグに追加して JQuery を導入できます:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2.テーブル内の交互の行の色の変更効果を実現するには

次に、テーブルのインターレース色の変更効果を実現するには、JQuery を使用する必要があります。具体的な実装手順は次のとおりです。

2.1 HTML 構造

まず、table 要素を含む単純な HTML 構造が必要です。サンプル コードは次のとおりです。

<table id="data-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
  </tr>
</table>

2.2 JQuery コード

次に、JQuery を使用して、テーブルの奇数行に異なる背景色を追加します。サンプル コードは次のとおりです。

$(document).ready(function() {
  $("#data-table tr:odd").css("background-color", "#f2f2f2");
});

この JQuery コードでは、操作を実行する前にページがロードされていることを確認するために $(document).ready() 関数が使用されています。 $("#data-table tr:odd")テーブル data-table 内の奇数行が、css("background-color", "#) によって選択されます。 f2f2f2 ")これらの行の背景色を設定します。

3. 効果のデモ

上記の手順により、テーブルの色を 1 行おきに変更する効果を実現することができました。ブラウザを開いてページを表示すると、表の奇数行の背景色が変わり、表がより美しく、読みやすくなっていることがわかります。

概要: この記事の導入を通じて、JQuery を使用してテーブルのインターレース色の変更効果を実現する方法を学びました。これは、実際の開発におけるユーザーエクスペリエンスを向上させ、ページに美しさと快適さを加えることができるシンプルで実用的な機能です。この記事があなたのお役に立てれば幸いです。ページをより鮮やかでインタラクティブにするために、この効果を実際のプロジェクトに適用してみてください。

以上がJquery を使用してテーブル内の行を 1 つおきに色を変える効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。