Bagaimanakah Saya Boleh Menggunakan CSS dan jQuery untuk Mencipta Warna Baris Bergantian dalam Jadual HTML?

Menggunakan CSS untuk Mencipta Warna Baris Jadual Ganti

Warna baris jadual berselang-seli meningkatkan daya tarikan visual dan kebolehgunaan jadual HTML, menjadikannya lebih mudah untuk membaca. Begini cara anda boleh mencapai ini menggunakan CSS:

• Menggunakan Table Class:

Anda boleh menetapkan kelas pada jadual dan menggunakan gaya pada baris jadual dalam kelas itu:

.alternate_color tr:nth-child(odd) {
  background-color: #CCCCCC;
}

Ini akan menggantikan warna latar belakang nombor ganjil baris.

• Menggunakan jQuery:

Dengan jQuery, anda boleh memilih dan menggayakan baris bernombor ganjil secara dinamik:

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

• anak ke-:

Secara langsung dalam lembaran gaya CSS, anda boleh menggunakan pemilih anak ke-n untuk menyasarkan setiap baris lain:

tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}

Ini memastikan bahawa hanya baris bernombor ganjil akan mempunyai warna latar belakang ganti.

• Contoh HTML:

Berikut ialah contoh HTML menggunakan kaedah di atas:

<table class="alternate_color">
  <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>

Oleh menggunakan CSS yang sesuai, anda boleh mencipta jalur zebra dengan mudah dalam jadual anda, meningkatkan kebolehbacaannya dan estetika.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan CSS dan jQuery untuk Mencipta Warna Baris Bergantian dalam Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!