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

Menggunakan CSS untuk Mencipta Warna Baris Jadual Bergantian

Untuk menukar warna latar belakang baris jadual secara dinamik dengan CSS, anda boleh memanipulasi sifat CSS unsur jadual dan baris.

Menggunakan anak ke-n Pemilih:

Anda boleh menggunakan pemilih anak ke-n CSS untuk menyasarkan baris ganjil atau genap. Contohnya:

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

Peraturan ini akan menggayakan semua baris ganjil dalam badan jadual dengan latar belakang biru dan teks putih.

Menggunakan jQuery:

Sebagai alternatif, anda boleh menggunakan JavaScript untuk mengenal pasti dan menggayakan baris secara dinamik. Dengan jQuery:

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

Kod ini memilih semua baris ganjil dan menetapkan warna latar belakangnya kepada hitam dan warna teks kepada putih.

Menggunakan Gaya pada Elemen Jadual:

Jika anda ingin menggunakan kesan warna berselang-seli pada keseluruhan jadual, anda boleh menggunakan ini pendekatan:

<table class="alternate_color">
  ...
</table>

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

Dalam kes ini, anda menambah kelas pada jadual dan peraturan CSS menyasarkan semua baris ganjil dalam jadual itu.

Nota: Menggunakan kelas elemen jadual untuk warna baris berselang-seli mungkin mengganggu peraturan penggayaan sedia ada yang digunakan pada jadual, jadi secara umumnya lebih disukai untuk menggunakan pemilih anak ke-n terus pada unsur tr.

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