Rumah >hujung hadapan web >tutorial js >Gunakan jQuery untuk melaksanakan: ubah suai atribut baris jadual secara dinamik
Gunakan jQuery untuk melaksanakan: ubah suai atribut baris jadual secara dinamik
- PHPzasal
- 2024-02-26 14:00:541199semak imbas
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan manipulasi DOM dan pengendalian acara dalam pembangunan web. Dalam pembangunan web, paparan dan pengendalian jadual sering terlibat, dan menukar nilai atribut baris jadual secara dinamik adalah keperluan biasa. Artikel ini akan menggunakan contoh khusus untuk menunjukkan cara menggunakan jQuery untuk menukar nilai atribut baris jadual secara dinamik.
Dalam contoh ini, andaikan kami mempunyai jadual yang mengandungi maklumat pelajar, di mana setiap baris mewakili pelajar, termasuk nama pelajar, nombor pelajar, gred dan maklumat lain. Kami mahu melaksanakan fungsi yang boleh menukar warna latar belakang baris secara dinamik apabila pengguna mengklik padanya. Seterusnya, kami akan melaksanakan ciri ini langkah demi langkah.
Pertama, kita perlu menentukan jadual yang mengandungi maklumat pelajar dalam HTML. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('tr').click(function() {
$(this).css('background-color', 'yellow');
});
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>学生姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>001</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>85</td>
</tr>
<tr>
<td>王五</td>
<td>003</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
</html>Dalam kod di atas, kami menggunakan acara klik jQuery untuk mendengar acara klik baris jadual. Apabila pengguna mengklik pada baris jadual, acara klik akan dicetuskan, dan kemudian menggunakan kaedah css jQuery untuk menukar warna latar belakang baris ini kepada kuning secara dinamik. click 事件来监听表格的行点击事件。当用户点击表格的某一行时，会触发 click 事件，然后使用 jQuery 的 css 方法来动态改变这一行的背景颜色为黄色。
通过上面的代码实现，当用户点击表格中的任意一行时，该行的背景颜色会变为黄色，从而实现了动态改变表格行的属性值的效果。
总结：通过本示例，我们展示了如何使用 jQuery 实现动态改变表格行的属性值，其中通过 click 事件监听行的点击事件，然后使用 css
klik, dan kemudian menggunakan Kaedah css menukar gaya baris. Di atas ialah contoh kod khusus kami untuk melaksanakan fungsi ini. Semoga artikel ini dapat memberi manfaat kepada pembaca. 🎜Atas ialah kandungan terperinci Gunakan jQuery untuk melaksanakan: ubah suai atribut baris jadual secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!