Bagaimana untuk mengubah suai kandungan jadual dengan jquery

Dalam pembangunan bahagian hadapan, jadual ialah cara biasa untuk memaparkan data. Walau bagaimanapun, apabila kita perlu mengubah suai kandungan jadual, kita sering perlu mengubah suai secara manual satu per satu, yang sangat menyusahkan dan tidak cekap. Oleh itu, menggunakan jQuery untuk mengubah suai kandungan jadual adalah penyelesaian yang sangat baik.

Apakah itu jQuery?

Sebelum bercakap tentang jQuery mengubah suai kandungan jadual, mari kita fahami jQuery dahulu. jQuery ialah perpustakaan JavaScript yang sangat baik yang merangkumi banyak kaedah untuk memudahkan manipulasi dokumen, mengendalikan acara, mencipta animasi, mengendalikan AJAX dan fungsi berkuasa lain. Menggunakan jQuery membolehkan kami mengendalikan dokumen dengan lebih mudah dan meningkatkan kecekapan pembangunan.

Operasi untuk mengubah suai kandungan jadual

Sekarang, mari kita lihat cara menggunakan jQuery untuk mengubah suai kandungan jadual.

Pertama, kita perlu mencipta jadual dalam halaman HTML dan menambah beberapa kandungan padanya, seperti:

<table id="myTable">
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>性别</th>
   </tr>
   <tr>
     <td>小明</td>
     <td>20</td>
     <td>男</td>
   </tr>
   <tr>
     <td>小红</td>
     <td>18</td>
     <td>女</td>
   </tr>
</table>

Seterusnya, kita perlu menulis kod jQuery untuk mengubah suai kandungan jadual . Kod berikut ialah contoh perkara yang boleh kita gunakan:

$(document).ready(function() {
    //获取表格中的单元格
    var $table = $('#myTable');
    var $tdList = $table.find('td');
    
    $tdList.each(function(){
        //获取单元格中的值
        var oldValue = $(this).text();
        //创建input
        var $input = $('<input type="text" class="form-control">');
        $input.val(oldValue);
        //替换
        $(this).html($input);
    });
    
    //监听input的keyup事件，即键盘按键事件
    $('input').live('keyup', function(event){
        //判断按键是否为enter键
        if(event.keyCode == 13) {
            //获取输入框的值
            var newValue = $(this).val();
            //替换单元格中的值
            $(this).parent().text(newValue);
        }
    });
});

Analisis kod:

1. $table = $('#myTable');: Dapatkan elemen jadual.
2. $tdList = $table.find('td');: Dapatkan semua elemen sel dalam jadual.
3. $tdList.each(): Lintas semua sel dan buat kotak input untuk setiap sel.
4. $(this).html($input);: Masukkan kotak input ke dalam sel dan gantikan kandungan asal dalam sel.
5. $('input').live('keyup', function(event){}): Pantau peristiwa kekunci papan kekunci semua kotak input.
6. if(event.keyCode == 13): Tentukan sama ada kekunci enter ditekan.
7. $(this).parent().text(newValue): Gantikan kandungan dalam kotak input dengan kandungan asal dalam sel.

Ringkasan

Kod contoh di atas secara dinamik mencipta kotak input untuk setiap sel dengan merentasi semua sel, memasukkan data baharu dalam kotak input dan menekan kekunci Enter , menggantikan yang asal data dengan data baharu. Kaedah ini sesuai untuk mengubah suai data jadual satu persatu.

Sebagai perpustakaan JavaScript yang berkuasa, jQuery juga mempunyai kelebihan yang besar dalam mengubah suai kandungan jadual. Kita boleh menggunakan jQuery untuk mencapai pengubahsuaian kandungan jadual yang lebih cekap dan mudah dengan fungsinya yang kaya.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai kandungan jadual dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!