Create editable table effects based on JQuery

Create editable table effects based on JQuery_jquery

WBOY

Release： 2016-05-16 16:24:54

Original

1108 people have browsed it

I recently worked on a project, and the project requirements are: click on the table to edit directly, press Enter or click elsewhere on the page to make the edit effective, press Esc to cancel the edit

Two friends gave 2 solutions. Let’s see which one is more suitable?

The first method to edit the table by clicking on it

Copy code The code is as follows:

//Equivalent to adding the onload event to the body tag in the page
$(function() {
//Find all td nodes
var tds = $("td");
//Add click events to all td
tds.click(function() {
//Get the currently clicked object
var td = $(this);
// Take out the text content of the current td and save it
var oldText = td.text();
//Create a text box and set the value of the text box to the saved value
          var input = $("");
//Set the content of the current td object to input
td.html(input);
//Set the click event of the text box to be invalid
input.click(function() {
              return false;
        });
//Set the style of the text box
input.css("border-width", "0");
input.css("font-size", "16px");
input.css("text-align", "center");
//Set the width of the text box equal to the width of td
input.width(td.width());
//Trigger the select all event when the text box gets focus
input.trigger("focus").trigger("select");
//When the text box loses focus, it changes back to text
input.blur(function() {
var input_blur = $(this);
//Save the content of the current text box
var newText = input_blur.val();
td.html(newText);
        });
//Response to keyboard events
input.keyup(function(event) {
// Get the key value var keyEvent = event || window.event;
var key = keyEvent.keyCode;
//Get the current object
var input_blur = $(this);
               switch (key)
                                                       {
case 13://Press the Enter key to save the contents of the current text box
var newText = input_blur.val();
                      td.html(newText);
break;
                     case 27://Press the esc key to cancel the modification and turn the text box into text
                      td.html(oldText);
break;
            }
        });
});
});

Second method to click on the table to edit

Copy code The code is as follows:

$(document).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});
function 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 = event || window.event;
        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().click(tdClick);
        }
    });
    tdnode.append(input);
    tdnode.children("input").trigger("select");
    //输入框失去焦点，所执行的方法
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("click");
}

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