Gunakan jQuery untuk mengubah suai atribut baris jadual secara dinamik

Tajuk: Gunakan jQuery untuk mengubah suai atribut baris jadual secara dinamik

Dalam pembangunan web, kami sering menghadapi keperluan untuk mengubah suai atribut baris jadual secara dinamik. Fungsi ini boleh dilaksanakan dengan mudah dan cekap menggunakan jQuery. Berikut menggunakan contoh kod khusus untuk memperkenalkan cara menggunakan jQuery untuk mengubah suai atribut baris jadual secara dinamik.

Pertama, kami memerlukan struktur jadual HTML yang ringkas:

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr data-id="1">
        <td>小明</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr data-id="2">
        <td>小红</td>
        <td>22</td>
        <td>女</td>
    </tr>
</table>

Seterusnya, kami menggunakan jQuery dalam JavaScript untuk mengubah suai atribut baris jadual secara dinamik. Kita boleh menambah acara klik pada baris jadual, dan kemudian mengubah suai sifat baris dalam pengendali acara, seperti menukar warna atau menambah nama kelas.

$(document).ready(function(){
    $("#myTable tr").click(function(){
        // 获取当前点击的表格行的data-id属性
        var id = $(this).attr("data-id");
        
        // 根据id选择需要修改属性的行
        var targetRow = $("#myTable tr[data-id='" + id + "']");
        
        // 修改行的背景颜色为黄色
        targetRow.css("background-color", "yellow");
        
        // 添加一个类名highlight
        targetRow.addClass("highlight");
    });
});

Dalam kod di atas, kami menambah acara klik pada baris jadual Apabila baris jadual diklik, kami mula-mula memperoleh atribut data-id baris yang diklik, dan kemudian pilih baris yang atributnya perlu diubah suai berdasarkan. pada atribut ini, dan ubah suai warna latar belakangnya adalah kuning, dan sorotan nama kelas ditambah untuk menyerlahkan baris ini.

Akhir sekali, kita boleh mentakrifkan gaya kelas serlahan dalam helaian gaya untuk memberikan kesan paparan yang lebih jelas untuk baris yang dipilih:

.highlight {
    font-weight: bold;
    color: red;
}

Melalui contoh kod di atas, kita boleh melaksanakan fungsi mengubah suai atribut baris jadual secara dinamik menggunakan jQuery, Tukar gaya baris dengan mengklik pada baris jadual. Kaedah ini mudah dan cekap, serta sesuai untuk banyak senario dalam pembangunan web di mana gaya jadual perlu diubah secara dinamik. Harap contoh ini membantu anda.

Atas ialah kandungan terperinci Gunakan jQuery untuk mengubah suai atribut baris jadual secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!