CSS と JavaScript を使用して HTML テーブルにゼブラ ストライプを作成する方法

CSS と JavaScript を使用してテーブルの代替行の色を適用する方法

HTML では、次のようにクラスを使用して代替行の色を適用できます。あなたは実証してきました。ただし、スタイルを個々の行ではなくテーブル コンテナー自体に適用する必要があります。 CSS セレクターは、これを実現する方法を提供します。

テーブルの行にゼブラ ストライプを持たせるには、:nth-child(odd) 疑似クラスを使用できます。このセレクターは、テーブル本体 () 内のすべての奇数行をターゲットとします。その後、これらの奇数行に、別の背景色やテキスト色などのスタイルを適用できます。

jQuery の使用

JavaScript を使用したい場合は、以下を使用できます。 jQueryライブラリ。 jQuery を使用すると、テーブル内の奇数行をすべて選択し、css() 関数で目的のスタイルを適用できます。

例HTML:

<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

CSS:

tbody td {
  padding: 30px;
}

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

jQuery:

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

これらを使用メソッドを使用すると、CSS を使用してテーブル行の代替色を簡単に作成でき、視覚的に魅力的なプレゼンテーションを確保できます。データ。

以上がCSS と JavaScript を使用して HTML テーブルにゼブラ ストライプを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。