jqueryは暗い色を変更します

Web デザインでは、テーブルが一般的なレイアウト方法です。ただし、テーブル内の行が多すぎると、ユーザーが異なる行を区別することが困難になる可能性があり、ユーザー エクスペリエンスや使いやすさに影響します。この問題を解決するために、開発者はいくつかの視覚効果を追加して、異なる行を区別できます。この記事では、jQuery を使用してテーブルの行の色を変更し、ユーザー エクスペリエンスを向上させます。

最初のステップは、HTML でテーブルを設定することです。 3 つの列を持つ単純なテーブルを使用してこのプロセスを説明します。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

次に CSS 部分です。表のスタイルと行の色を設定します。

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr.even {
  background-color: #f2f2f2;
}

ここでは、セル内のパディングや枠線など、表の基本スタイルを設定します。また、1 行おきに色を変更する行スタイルをグレーに設定します。

ここで、jQuery を使用してテーブルの各行にスタイルを追加します。変数を使用して現在の行のパリティを追跡し、偶数行にクラス名「even」を追加します。

$(document).ready(function() {
  $('table tbody tr:even').addClass('even');
});

この関数は、まずドキュメントがロードされ、操作の準備ができているかどうかを検出します。次に、jQuery セレクターを使用してテーブル内の各 tbody タグの tr サブタグを選択し、偶数行をフィルターで除外し、クラス名「even」を各偶数行に追加します。これを実行すると、テーブルの偶数行の背景色が変更され、読みやすくなります。

この例を通して、jQuery と CSS を使用してテーブルのスタイルを変更する方法を確認できます。これにより、Web デザインの視覚的な効果が高まるだけでなく、ユーザー エクスペリエンスも向上し、Web サイトが使いやすくなります。

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