Erstellen Sie bearbeitbare Tabelleneffekte basierend auf JQuery_jquery

Ich habe kürzlich an einem Projekt gearbeitet und die Projektanforderungen sind: Klicken Sie auf die Tabelle, um sie direkt zu bearbeiten, drücken Sie die Eingabetaste oder klicken Sie auf eine andere Stelle auf der Seite, um die Bearbeitung wirksam zu machen, drücken Sie Esc, um die Bearbeitung abzubrechen

Zwei Freunde haben zwei Lösungen angegeben. Mal sehen, welche besser geeignet ist.

Die erste Methode zum Bearbeiten der Tabelle durch Anklicken

Code kopieren Der Code lautet wie folgt:

//Entspricht dem Hinzufügen des Onload-Ereignisses zum Body-Tag auf der Seite
$(function() {
//Alle td-Knoten finden
var tds = $("td");
//Klickereignisse zu allen td hinzufügen
tds.click(function() {
//Das aktuell angeklickte Objekt abrufen
        var td = $(this);
// Den Textinhalt des aktuellen TD herausnehmen und speichern
        var oldText = td.text();
//Erstelle ein Textfeld und setze den Wert des Textfelds auf den gespeicherten Wert
          var input = $("");
//Setze den Inhalt des aktuellen td-Objekts auf input
        td.html(Eingabe);
//Setze das Klickereignis des Textfelds auf ungültig
​​​​ input.click(function() {
              return false;
});
//Legen Sie den Stil des Textfelds fest
​​​​ input.css("border-width", "0");
​​​​ input.css("font-size", "16px");
​​​​ input.css("text-align", "center");
//Setzen Sie die Breite des Textfelds auf die Breite von td
​​​​ input.width(td.width());
​​​​ //Das Ereignis „Alle auswählen“ auslösen, wenn das Textfeld den Fokus erhält
​​​​ input.trigger("focus").trigger("select");
//Wenn das Textfeld den Fokus verliert, ändert es sich wieder in Text
​​​​ input.blur(function() {
            var input_blur = $(this);
//Speichern Sie den Inhalt des aktuellen Textfelds
            var newText = input_blur.val();
            td.html(newText);
});
//Reaktion auf Tastaturereignisse
​​​​ input.keyup(function(event) {
// Holen Sie sich den Schlüsselwert             var keyEvent = event || window.event;
          var key = keyEvent.keyCode;
//Das aktuelle Objekt abrufen
            var input_blur = $(this);
               Schalter (Taste)
                                                       {
Fall 13://Drücken Sie die Eingabetaste, um den Inhalt des aktuellen Textfelds zu speichern
                  var newText = input_blur.val();
                      td.html(newText);
Pause;
                     case 27://Drücken Sie die Esc-Taste, um die Änderung abzubrechen und das Textfeld in Text
umzuwandeln                       td.html(oldText);
Pause;
            }
});
});
});

Zweite Methode: Klicken Sie auf die Tabelle, um sie zu bearbeiten

Code kopieren Der Code lautet wie folgt:

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

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