Gunakan jQuery untuk melaksanakan: ubah suai atribut baris jadual secara dinamik-tutorial js-php.cn

Gunakan jQuery untuk melaksanakan: ubah suai atribut baris jadual secara dinamik

PHPz

Lepaskan： 2024-02-26 14:00:54

asal

1196 orang telah melayarinya

jQuery 实例：动态改变表格行的属性值

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>

Salin selepas log masuk

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

Melalui kod di atas, apabila pengguna mengklik pada mana-mana baris dalam jadual, warna latar belakang baris akan bertukar kepada kuning, sekali gus mencapai kesan menukar nilai atribut baris jadual secara dinamik. 🎜🎜Ringkasan: Melalui contoh ini, kami menunjukkan cara menggunakan jQuery untuk menukar secara dinamik nilai atribut baris jadual, di mana peristiwa klik baris dipantau melalui acara 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!