Rumah > Artikel > hujung hadapan web > Petua jQuery: Cara Mengubah Sifat Baris Jadual
Petua jQuery: Cara Mengubah Sifat Baris Jadual
- WBOYasal
- 2024-02-27 17:27:03947semak imbas
Tajuk: Petua jQuery: Cara Menukar Atribut Baris Jadual
Teks:
Dalam pembangunan web, jadual adalah salah satu elemen yang biasa digunakan, dan menukar atribut baris jadual melalui jQuery boleh menjadikan halaman lebih Interaktiviti dan kesan dinamik . Artikel ini akan memperkenalkan beberapa kaedah menggunakan jQuery untuk menukar sifat baris jadual dan menyediakan contoh kod khusus.
1. Tambahkan kesan tuding pada baris jadual
Untuk mencapai kesan menukar warna latar belakang baris jadual apabila tetikus melayang di atas baris jadual, anda boleh menggunakan kod berikut:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
tr:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<table>
<tr>
<td>第一行</td>
<td>内容</td>
</tr>
<tr>
<td>第二行</td>
<td>内容</td>
</tr>
</table>
</body>
</html> 2. Tukar baris jadual warna berdasarkan syarat
Ya Kadangkala kita perlu menukar gaya baris jadual berdasarkan syarat tertentu, seperti memaparkan warna berbeza berdasarkan saiz nilai. Kod berikut menunjukkan cara menukar warna latar belakang baris jadual berdasarkan saiz data:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("table tr").each(function(){
var value = parseInt($(this).find("td:last").text());
if(value > 50){
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>数据1</td>
<td>60</td>
</tr>
<tr>
<td>数据2</td>
<td>40</td>
</tr>
</table>
</body>
</html>Di atas adalah dua kaedah biasa untuk menukar sifat baris jadual menggunakan jQuery Melalui teknik ini, anda boleh menjadikan halaman web lebih cantik dan dinamik. Saya harap kandungan artikel ini berguna kepada anda!
Atas ialah kandungan terperinci Petua jQuery: Cara Mengubah Sifat Baris Jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!