jquery Implements an editable table

Click on the table can be directly edited, enter or mouse click on the page other places after the editing takes effect, press ESC to cancel editing

The first way to click a table to edit

Corresponds to the body tag in the page plus the OnLoad event
$ (function () {
Find all TD nodes
var TDS = $ ("TD");
Add a click event to all TD
Tds.click (function () {
Get the currently clicked object
var td = $ (this);
Take out the current TD text content and save it.
var oldtext = Td.text ();
Create a text box that sets the value of the text box to the saved value
var input = $ ("<input type= ' text ' value= '" + oldtext + "'/>");
Sets the current TD object content to input
td.html (input);
Invalid Click event for setting text box
Input.click (function () {
return false;
});
Set the style of a text box
Input.css ("Border-width", "0");
Input.css ("Font-size", "16px");
Input.css ("Text-align", "center");
Set text box width equal to TD width
Input.width (Td.width ());
Trigger a Select all event when the text box gets focus
Input.trigger ("Focus"). Trigger ("select");
Re-becomes text when the text box 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);
});
Responding to keyboard events
Input.keyup (function (event) {
Get key value
var keyevent = Event | | window.event;
var key = Keyevent.keycode;
Get 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

1. Case 27://Press ESC to cancel the change and change the text box to text
   Td.html (OldText);
   Break
   }
   });
   });
   });

The second way to click a table can be edited

$ (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 if the ESC key is pressed
$ (this). Parent (). HTML (tdtext);
$ (this). Parent (). Click (Tdclick);
}
});

Tdnode.append (input);
Tdnode.children ("Input"). Trigger ("select");
The input box loses focus and the method that is executed
Input.blur (function () {
Tdnode.html ($ (this). Val ());
Tdnode.click (Tdclick);
});
Tdnode.unbind ("click");
}

jquery Implements an editable table