jquery menukar warna teks baris jadual

Dalam pembangunan web, jadual sentiasa menjadi salah satu elemen yang biasa kami gunakan. Dalam jadual, kadangkala kita perlu mengubah suai gaya baris atau lajur tertentu, seperti mengubah suai warna teks baris. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengubah suai warna teks baris jadual.

1. Buat jadual

Pertama, kita perlu mencipta jadual mudah untuk bereksperimen dengan:

<table id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Smith</td>
    <td>40</td>
  </tr>
</table>

2. Pilih baris jadual menggunakan jQuery

Seterusnya, dalam jQuery, kita akan menggunakan pemilih untuk memilih setiap baris dalam jadual dan menentukan gaya mereka. Dalam contoh ini, kami memilih semua baris ganjil dalam jadual #myTable dan menetapkan warna teksnya kepada merah:

$("#myTable tr:nth-child(odd)").css("color", "red");

Maksud pemilih ini ialah: pilih baris dalam #myTable Semua baris bernombor ganjil (iaitu, baris 1, 3, dan 5) dan tukar warna teksnya kepada merah.

3. Tambah kelas gaya pada baris jadual

Kami juga boleh menambah kelas gaya (seperti highlight) pada baris jadual dan kemudian gunakan CSS untuk mentakrifkan ia dalam helaian gaya Gaya kelas ini:

.highlight {
    background-color: yellow;
}

Kemudian, gunakan kod berikut dalam jQuery untuk memilih semua baris dalam jadual #myTable dan gunakan kaedah addClass() untuk menambah gaya dengan kelas namakan highlight pada setiap baris :

$("#myTable tr").addClass("highlight");

Dalam contoh ini, kami memilih semua baris dalam jadual #myTable dan menambah kelas gaya highlight padanya.

4. Ubah suai gaya berdasarkan nilai sel

Selain mengubah suai gaya mengikut baris, kita juga boleh mengubah suai gaya dalam jadual berdasarkan nilai sel. Sebagai contoh, dalam contoh berikut, kami memilih semua sel dalam jadual #myTable yang lajur ke-3 (umur) lebih besar daripada atau sama dengan 30 dan menetapkan warna teksnya kepada hijau:

$("#myTable td:nth-child(3)").filter(function() {
    return parseInt($(this).text()) >= 30;
}).css("color", "green");

pemilih ini Maksudnya ialah: pilih semua sel dalam lajur 3 (umur) dalam jadual #myTable dan gunakan kaedah filter() untuk menapis sel yang teksnya ditukar kepada integer dan lebih besar daripada atau sama dengan 30, dan akhirnya tetapkan warna teks mereka kepada hijau.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan jQuery untuk mengubah suai warna teks baris jadual. Kita boleh menggunakan pemilih untuk memilih baris atau sel dalam jadual dan mengubah suai gayanya. Apabila mengedit jadual, operasi serupa juga boleh digunakan untuk mengubah suai kesan gaya lain dalam jadual, seperti warna jidar, warna latar belakang, dsb.

Perlu diperhatikan bahawa dalam pembangunan sebenar, kita perlu mengoptimumkan prestasi JavaScript dan jQuery untuk mengelakkan operasi membaca dan menulis yang kerap pada DOM. Oleh itu, apabila melaksanakan operasi jadual yang kompleks, kami boleh mempertimbangkan untuk mengurangkan bilangan operasi atau caching data jadual untuk meningkatkan kecekapan pemprosesan.

Atas ialah kandungan terperinci jquery menukar warna teks baris jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!