JQuery implements editable tables and jquery edits tables.

JQuery implements editable tables and jquery edits tables.

You can click the table to edit it directly. Press ENTER or click another part of the page to edit the table. Press Esc to cancel editing.

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

// 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;

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

$ (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 ");
}