Recently made a project, where the project requirements: Click on the table can be directly edited, enter or mouse click on the page other places after the edit effective, press ESC to cancel the edit
2 small partners to give 2 solution, let's see which is more appropriate?
The first way to click a table to edit
Copy Code code as follows:
Equivalent to the body tag in the page plus the OnLoad event
$ (function () {
Find all TD nodes
var TDS = $ ("TD");
Add Click events to all TD
Tds.click (function () {
Get the object you are currently clicking on
var td = $ (this);
Remove the current TD's text content and save it
var oldtext = Td.text ();
Creates a text box that sets the value of the text box to the saved value
var input = $ ("<input type= ' text ' value= '" + oldtext + "'/>");
Set the current TD object contents to input
td.html (input);
Set the Click event for the text box to fail
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 ());
Triggers a full selection event when the text box has the focus
Input.trigger ("Focus"). Trigger ("select");
Change text back 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
Case 27://Press ESC, cancel change, turn text box into text
Td.html (OldText);
Break
}
});
});
});
The second way to click a table to edit
Copy Code code 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) {//Determine if 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");
}
Want to compare, the individual prefers the second kind, the small partner is what opinion, welcome message to me.
