Create editable table effects based on JQuery.

Create editable table effects based on JQuery.

Recently, a project was created. project requirements: click a table and you can directly edit the project. Press ENTER or click another place on the page to edit the project. Press Esc to cancel editing.

The two partners provided the solution for the second phase. Let's take a look at which one is more appropriate?

First, you can click a table to edit the table.

Copy codeThe Code is as follows:
// Equivalent to adding an onload event to the body tag of the page
$ (Function (){
// Find all td nodes
Var tds = $ ("td ");
// Add a click event to all td
Tds. click (function (){
// Obtain the object of the current click
Var td = $ (this );
// Extract 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 = $ ("<input type = 'text' value = '" + oldText + "'/> ");
// Set the content of the current td object to input
Td.html (input );
// Set the Click Event of the text box to invalid
Input. click (function (){
Return false;
});
// Set the text box style
Input.css ("border-width", "0 ");
Input.css ("font-size", "16px ");
Input.css ("text-align", "center ");
// Set the text box width to equal to the width of td
Input. width (td. width ());
// Trigger the all-selected event when the text box gets the focus
Input. trigger ("focus"). trigger ("select ");
// Changes to text when the text box loses focus
Input. blur (function (){
Var input_blur = $ (this );
// Save the content of the current text box
Var newText = input_blur.val ();
Td.html (newText );
});
// Responds to Keyboard Events
Input. keyup (function (event ){
// Obtain the key value
Var keyEvent = event | window. event;
Var key = keyEvent. keyCode;
// Obtain the current object
Var input_blur = $ (this );
Switch (key)
{
Case 13: // press enter to save the content of the current text box
Var newText = input_blur.val ();
Td.html (newText );
Break;
Case 27: // Press esc to cancel the modification and convert the text box to text.
Td.html (oldText );
Break;
}
});
});
});

Second, you can click a table to edit the table.

Copy codeThe 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> ");
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) {// determines whether to press the ESC key
Optional (this).parent().html (tdtext );
$ (This). parent (). click (tdClick );
}
});
Tdnode. append (input );
Tdnode. children ("input"). trigger ("select ");
// The input box loses focus and the method to be executed
Input. blur (function (){
Tdnode.html ($ (this). val ());
Tdnode. click (tdClick );
});
Tdnode. unbind ("click ");
}

In comparison, I prefer the second type. What are your comments? Please leave a message to me.