jquery menetapkan warna td

Semasa pembangunan halaman, kita mungkin perlu menandai sel tertentu dalam jadual dengan warna khas untuk memaparkan maklumat atau status tertentu. Menggunakan jQuery, anda boleh dengan mudah menetapkan warna latar belakang, warna fon dan gaya lain TD dalam jadual secara dinamik.

1. Gunakan jQuery untuk menukar warna sel

Dalam jQuery, kita boleh menggunakan kaedah CSS untuk menukar gaya sel (TD) secara dinamik, seperti warna, ketinggian, lebar, dsb. Antaranya, kod untuk menukar warna latar belakang sel adalah seperti berikut:

$("td").css("background-color", "red");

Dalam contoh ini, kita mula-mula memilih semua elemen TD, dan kemudian menggunakan kaedah css() untuk menukar nilai latar belakangnya atribut warna, seperti yang ditunjukkan dalam rajah:

Begitu juga, kita juga boleh menggunakan sintaks CSS untuk meletakkan dan menukar gaya elemen TD yang ditentukan. Sebagai contoh, jika kita perlu menukar warna latar belakang sel dalam baris kedua dan lajur ketiga, kita boleh menulis:

$("table tr:eq(1) td:eq(2)").css("background-color", "blue");

Dalam contoh ini, kita mula-mula memilih elemen <tr> dalam baris kedua, dan kemudian pilih elemen <code><td> ketiga, dan akhirnya menukar nilai atribut warna latar belakangnya. <p>2. Gunakan jQuery untuk menukar warna sel berdasarkan keadaan </p> <p>Selain menukar gaya sel secara langsung, kami juga boleh menukar gaya sel tertentu secara dinamik berdasarkan syarat. Meneruskan contoh di atas, kami ingin menukar warna sel berdasarkan saiz nombor di dalamnya. </p> <p>Mula-mula, kita perlu menggelung sel-sel jadual, dan kemudian menggunakan pernyataan penghakiman untuk menentukan nilai dalam sel. Jika nombor dalam sel lebih daripada 5, tukar warna latar belakangnya kepada hijau, sebaliknya kepada merah. Kod tersebut dilaksanakan seperti berikut: </p><pre class='brush:php;toolbar:false;'>$(&quot;table tr&quot;).each(function(){ $(this).find('td').each(function(){ if(parseInt($(this).text()) &gt; 5){ $(this).css(&quot;background-color&quot;, &quot;green&quot;); }else{ $(this).css(&quot;background-color&quot;, &quot;red&quot;); } }); });</pre><p>Dalam contoh ini, kami menggunakan kaedah each() untuk melintasi setiap baris dalam jadual, dan kemudian menggunakan kaedah find() untuk melintasi sel dalam setiap baris. Gunakan kaedah text() untuk mendapatkan semula kandungan dalam sel, kemudian bandingkan saiz nombor dan tukar nilai atribut warna latar belakang. </p> <p>3. Lagi tetapan gaya sel </p> <p>Selain warna latar belakang, kami juga boleh menukar secara dinamik kebanyakan atribut dalam gaya sel melalui kaedah CSS: </p><pre class='brush:php;toolbar:false;'>$(selector).css(&quot;propertyName&quot;, &quot;value&quot;);</pre><p> Contohnya: </p> <p>1. Tukar saiz dan warna fon sel: </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;font-size&quot;:&quot;18px&quot;, &quot;color&quot;:&quot;#333&quot;});</pre><p>2 Tukar gaya dan warna sempadan sel: </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;border-style&quot;:&quot;solid&quot;, &quot;border-width&quot;:&quot;2px&quot;, &quot;border-color&quot;:&quot;#ccc&quot;});</pre><p>Selain kaedah CSS, jQuery juga menyediakan yang lain. Kaedah untuk menetapkan gaya sel, seperti kaedah addClass() dan removeClass(), boleh menambah dan mengalih keluar gaya kelas masing-masing. Kaedah ini boleh digabungkan dengan lebih fleksibel untuk mencapai pelbagai kesan tetapan gaya sel. </p> <p>Ringkasan: </p> <p>jQuery menyediakan kaedah tetapan gaya sel (TD) yang sangat mudah, yang boleh memudahkan penanda khusus kami bagi data jadual. Dengan menetapkan gaya sel secara dinamik, kami boleh mengoptimumkan kesan paparan halaman dengan cepat dan meningkatkan pengalaman interaktif pengguna. </p> </td>

Atas ialah kandungan terperinci jquery menetapkan warna td. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!