Créer des effets de table modifiables basés sur JQuery_jquery

J'ai récemment travaillé sur un projet et les exigences du projet sont les suivantes : cliquez sur le tableau pour modifier directement, appuyez sur Entrée ou cliquez ailleurs sur la page pour rendre la modification effective, appuyez sur Echap pour annuler la modification

Deux amis ont proposé 2 solutions. Voyons laquelle est la plus adaptée ?

La première méthode pour éditer le tableau en cliquant dessus

Copier le code Le code est le suivant :

//Équivalent à l'ajout de l'événement onload à la balise body dans la page
$(fonction() {
//Trouver tous les nœuds td
var tds = $("td");
//Ajouter des événements de clic à tous les td
tds.click(function() {
//Obtenir l'objet actuellement cliqué
        var td = $(this);
// Supprime le contenu texte du td actuel et enregistre-le
        var oldText = td.text();
//Créez une zone de texte et définissez la valeur de la zone de texte sur la valeur enregistrée
          var input = $("");
//Définit le contenu de l'objet td actuel sur input
        td.html(input);
//Définit l'événement click de la zone de texte comme étant invalide
​​​​ input.click(function() {
              return false ;
        });
//Définissez le style de la zone de texte
​​​​ input.css("border-width", "0");
​​​​ input.css("font-size", "16px");
​​​​ input.css("text-align", "center");
//Définissez la largeur de la zone de texte égale à la largeur de td
​​​​ input.width(td.width());
​​​​ //Déclenchez l'événement Select All lorsque la zone de texte obtient le focus
​​​​ input.trigger("focus").trigger("select");
//Lorsque la zone de texte perd le focus, elle redevient texte
​​​​ input.blur(function() {
            var input_blur = $(this);
//Enregistre le contenu de la zone de texte actuelle
            var newText = input_blur.val();
            td.html(newText);
        });
//Réponse aux événements clavier
​​​​ input.keyup(function(event) {
// Récupère la valeur clé             var keyEvent = event ||           var key = keyEvent.keyCode;
//Obtenir l'objet actuel
            var input_blur = $(this);
               interrupteur (clé)
                                                      {
cas 13://Appuyez sur la touche Entrée pour enregistrer le contenu de la zone de texte actuelle
                  var newText = input_blur.val();
                      td.html(newText);
pause;
                     cas 27://Appuyez sur la touche echap pour annuler la modification et transformer la zone de texte en texte
                      td.html(oldText);
pause;
            }
        });
});
});

Deuxième méthode pour cliquer sur le tableau à modifier

Copier le code Le code est le suivant :

$(document).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});
fonction tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("");
    input.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(fonction(événement){
        var monÉvénement = événement || window.event;
        var keyCode = monEvent.keyCode;
        si(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().click(tdClick);
        >
    });
    tdnode.append(input);
    tdnode.children("input").trigger("select");
    //输入框失去焦点，所执行的方法
    input.blur(function(){
        tdnode.html ($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("cliquez");
>

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