jquery implements editable table example explanations (2) _jquery

The results we will eventually achieve are as follows:

When you click on the Learning Number column, you can edit it:

When you click ESC, the action is canceled, and when you click Enter, the modification takes effect (no interaction with the background)
The page code is as follows (asp.net):

<%@ Page language= "C #" autoeventwireup= "true" codefile= "EditTable.aspx.cs" inherits= "edittable"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

CSS (EIDTTABLE.CSS)

Table 
{ 
 border:1px solid black; 
 Border-collapse:collapse; 
 width:500px; 
 } 
Table th 
{ 
 border:1px solid black; 
 width:50%; 
 } 
Table TD 
{ 
 border:1px solid black; 
 width:50px; 
 } 
tbody th 
{ 
 background-color: #A3BAE9 
 }

JS (eidttable.js):

<reference path= "Jquery-1.9.1.min.js"/>//$ (document). Ready (function () {//alert (' Test '); 
 
//}); 
 Simple wording $ (function () {$ ("tr:odd"). CSS ("Background-color", "#ECE9D8"); 
 
 var OBJTD = $ (". Edittd"); 
 Objtd.click (function () {var text = $ (this). html (); 
 
 var objthistd = $ (this); 
 Solve the problem if you click between the text box and the TD in the middle of the question if (Objthistd.children ("input"). Length > 0) {return false; 
 
 var Inputtext = $ ("<input value= ' test ' type= ' text '/>"); Inputtext.width (Objtd.width ()). CSS ("Font-size", "16px"). CSS ("Background-color", Objtd.css ("Background-color")). 
 
 CSS ("border-width", "0"). val (text); 
 Objthistd.html (""); 
 
 Inputtext.appendto (OBJTHISTD); 
 
 Inputtext.trigger ("Focus"). Trigger ("select"); 
 Inputtext.click (function () {return false; 
 
 }); 
 The KeyDown event used here, I tried to use the KeyUp event could not mask the browser's return page submission event Inputtext.keydown (function (event) {//alert (Event.keycode); 
 var keycode = Event.which; 
 if (keycode =) {objthistd.html ($ (this). Val ()); Return False 
 } if (keycode = =) {objthistd.html (text); 
 } 
 }); 
 
 
});  });

The above is the implementation of editable form all the code, I hope you can carefully study, apply to their own website.