Create editable table effects based on JQuery

Recently, I made a project, in which the project requirements: click the table to edit directly, click enter or mouse click other parts of the page to edit effective, press Esc to cancel the editing

Two friends have proposed two solutions. Let's see which one is more suitable.

The first way you can edit a table is by clicking on it

// It's on the page  body Tag along with onload The event 

$(function() {

    // Find all td node 

    var tds = $("td");

    // For all the td Add click events 

    tds.click(function() {

        // Gets the currently clicked object 

        var td = $(this);

        // Take out the current td The text content is saved 

        var oldText = td.text();

        // To establish 1 Set the value of the text box to the saved value 

        var input = $("<input type='text' value='" + oldText + "'/>");

        // The current td Object content is set to input

        td.html(input);

        // Set the click event of the text box to expire 

        input.click(function() {

            return false;

        });

        // Sets the style of the text box 

        input.css("border-width", "0");

        input.css("font-size", "16px");

        input.css("text-align", "center");

        // Set the text box width to equal td The width of the 

        input.width(td.width());

        // Triggers a select all event when the text box gets focus 

        input.trigger("focus").trigger("select");

        // The text box becomes text again when it loses focus 

        input.blur(function() {

            var input_blur = $(this);

            // Save the contents of the current text box 

            var newText = input_blur.val();

            td.html(newText);

        });

        // Response to keyboard events 

        input.keyup(function(event) {

            //  Access to 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 enter to save the contents of the current text box 

                    var newText = input_blur.val();

                    td.html(newText);

                    break;

                case 27:// Press the  esc Key, unmodify, turn the text box into text 

                    td.html(oldText);

                    break;

            }

        });

    });

});

The second way you can edit a table is by clicking on it

$(document).ready(function(){

    var tds = $("td");

    tds.click(tdClick);

});

function tdClick(){

    var tdnode = $(this);

    var tdtext = tdnode.text();

    tdnode.html("");

    var input = $("<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){  // Determine whether to press ESC key 

            $(this).parent().html(tdtext);

            $(this).parent().click(tdClick);

        }

    });

    tdnode.append(input);

    tdnode.children("input").trigger("select");

    // The input box loses focus on the method being executed 

    input.blur(function(){

        tdnode.html($(this).val());

        tdnode.click(tdClick);

    });

    tdnode.unbind("click");

}

Want to compare to say, the individual likes 2 kinds of 1 more, what is the little friend's opinion, welcome to leave a message to me.