Cipta kesan jadual boleh diedit berdasarkan JQuery_jquery

Saya baru-baru ini mengusahakan projek, dan keperluan projek ialah: klik pada jadual untuk mengedit terus, tekan Enter atau klik di tempat lain pada halaman untuk menjadikan pengeditan berkesan, tekan Esc untuk membatalkan pengeditan

Dua rakan memberi 2 penyelesaian Mari kita lihat yang mana lebih sesuai?

Kaedah pertama untuk mengedit jadual dengan mengklik padanya

Salin kod Kod adalah seperti berikut:

//Setara dengan menambahkan acara onload pada teg badan dalam halaman
$(fungsi() {
//Cari semua nod td
var tds = $("td");
//Tambah acara klik pada semua td
tds.click(function() {
//Dapatkan objek yang sedang diklik
        var td = $(this);
// Keluarkan kandungan teks td semasa dan simpan
        var oldText = td.text();
//Buat kotak teks dan tetapkan nilai kotak teks kepada nilai yang disimpan
          var input = $("");
//Tetapkan kandungan objek td semasa kepada input
        td.html(input);
//Tetapkan acara klik pada kotak teks menjadi tidak sah
​​​​ input.klik(fungsi() {
              pulangan palsu;
});
//Tetapkan gaya kotak teks
​​​​ input.css("lebar sempadan", "0");
input.css("font-size", "16px");
input.css("text-align", "center");
//Tetapkan lebar kotak teks sama dengan lebar td
input.width(td.width());
​​​​ //Cetuskan pilih semua acara apabila kotak teks mendapat fokus
​​​​ input.trigger("focus").trigger("select");
//Apabila kotak teks hilang fokus, ia bertukar kembali kepada teks
​​​​ input.blur(function() {
            var input_blur = $(this);
//Simpan kandungan kotak teks semasa
          var newText = input_blur.val();
            td.html(newTeks);
});
//Tindak balas kepada acara papan kekunci
​​​​ input.keyup(fungsi(acara) {
// Dapatkan nilai kunci >             var keyEvent = peristiwa ||           kunci var = keyEvent.keyCode;
//Dapatkan objek semasa
            var input_blur = $(this);
               suis (kunci)
                                                        {
kes 13://Tekan kekunci Enter untuk menyimpan kandungan kotak teks semasa
                  var newText = input_blur.val();
                     td.html(Teks baharu);
rehat;
                     kes 27://Tekan kekunci esc untuk membatalkan pengubahsuaian dan tukar kotak teks menjadi teks
                  td.html(Teks lama);
rehat;
            }
});
});
});

Kaedah kedua untuk mengklik pada jadual untuk mengedit

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
    var tds = $("td");
    tds.click(tdClick);
});
fungsi tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("");
    input.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(fungsi(acara){
        var myEvent = acara || tingkap.acara;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(inputtext);
            td.click(tdClick);
        }
        if(keyCode == 27){  //判断是否按下ESC键
            $(this).parent().html(tdtext);
            $(this).parent().klik(tdClick);
        }
    });
    tdnode.append(input);
    tdnode.children("input").trigger("select");
    //输入框失去焦点，所执行的方法
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("klik");
}

想比较来说，个人更喜欢第二种一些，小伙伴们是什么意见呢，欢迎留言>。🎜