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

Mencapai Pewarnaan Baris Jadual Ganti dengan CSS

Dalam jadual HTML, memberikan warna berselang-seli pada baris boleh meningkatkan daya tarikan visual, menjadikan data lebih mudah dibaca. Ini boleh dicapai menggunakan sama ada kelas CSS yang digunakan pada elemen tr individu atau dengan menggayakan elemen jadual itu sendiri.

Menggunakan Kelas CSS

HTML dan CSS yang disediakan menggunakan kelas CSS (tr.d0 dan tr .d1) untuk mewarnakan baris. Walau bagaimanapun, untuk mewarnakan baris berdasarkan kedudukannya dalam jadual, kita boleh memanfaatkan pemilih :nth-child dalam elemen tbody. Contohnya:

tbody tr:nth-child(2n+1) {
  background-color: #CC9999;
  color: black;
}
tbody tr:nth-child(2n) {
  background-color: #9999CC;
  color: black;
}

Menggunakan Penggayaan Jadual

Sebagai alternatif, kita boleh menggayakan keseluruhan jadual menggunakan elemen jadual. Untuk menjadikan semua baris ganjil warna tertentu, kami boleh menggunakan CSS berikut:

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

Menggunakan JavaScript (jQuery)

Pendekatan lain melibatkan penggunaan JavaScript (jQuery):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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