Bagaimana untuk Mencipta Jalur Zebra dalam Jadual HTML Menggunakan CSS dan JavaScript?

Cara Memohon Warna Baris Jadual Ganti Menggunakan CSS dan JavaScript

Dalam HTML anda, anda boleh menggunakan kelas untuk menggunakan warna baris ganti, sebagai anda telah menunjukkan. Walau bagaimanapun, anda mahu menggunakan penggayaan pada bekas meja itu sendiri dan bukan pada setiap baris individu. Pemilih CSS menyediakan cara untuk mencapai perkara ini.

Untuk menjadikan baris jadual mempunyai jalur zebra, anda boleh menggunakan kelas pseudo :nth-child(odd). Pemilih ini menyasarkan setiap baris ganjil dalam badan jadual (). Anda kemudian boleh menggunakan penggayaan pada baris ganjil ini, seperti warna latar belakang dan warna teks yang berbeza.

Menggunakan jQuery

Jika anda lebih suka menggunakan JavaScript, anda boleh menggunakan perpustakaan jQuery. Dengan jQuery, anda boleh memilih semua baris ganjil dalam jadual dan menggunakan penggayaan yang diingini dengan fungsi css().

Contoh 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"
  });
});

Dengan ini kaedah, anda boleh dengan mudah membuat warna baris jadual ganti menggunakan CSS, memastikan persembahan anda yang menarik secara visual data.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jalur Zebra dalam Jadual HTML Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!