Small Valley Combat jquery (ii)--editable table

  today's implementation is an example of a table,by getting the odd rows of the table,Set Background color properties,makes the odd and even row background color different.This table can be edited when clicked,Enter to change to the newly entered content; ESCRestore the original text.the implementation of the table is very clear,only in the implementation of the process will appear some smallBug.throughJQueryfunctions can be solved.

let's see . HTML Code :

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
The table can contain thead and tbody tags, and the contents of the header are placed in th. The benefit of this writing is that you can choose what you want through the tag selector, such as: Tbody th{}

JS Code :
The background color of the odd and even rows that need to be solved first through JavaScript is different $ (function () {///Find all the odd lines in the content area of the table $ ("Tbody Tr:even"). CSS ("Background-color", "# Ece9d8 ");//Find all the cell numbers, save up var NUMTD = $ (" tbody Td:even "), Numtd.click (function () {var tdobj=$ (this); if (Tdobj.children ("Input"). length>0) {//current TD has input text box, do not execute click to process return false;} var txt = tdobj.html (); Create a text box//Remove text box border//Set the text box to 16px//the width of the text box with the width of the TD//Set the text box background color//Put the contents of the current TD into the text box var inputobj=$ ("<input type=" Text ' > '). css ("border-width", "0"). CSS ("Font-size", "16px"). Width (Tdobj.width ()). CSS ("Background-color", Tdobj.css ("Background-color")). Val (tdobj.html ());//Insert text box into TD tdobj.html (""); Inputobj.appendto (tdobj);// After the text box is inserted, the Inputobj.trigger ("Focus") is selected. Trigger ("select"); Inputobj.click (function () {return false;     }); /Handling text box carriage return and ESC key operation Inputobj.keyup (function (event) {var keycode=event.which;//carriage return if (keycode==13) {var inputtext=$ (this ). Val (); tdobj.html (Inputtext);} Escif (keycode==27) {tdobj.html (TXT);}}); });});

In the $ function, all the TR nodes in the tbody can be returned by $ ("Tbody tr"), and the $ ("tbody Tr:even") can return a TR node in tbody where all index values are even.
In the above code we can see the HTML method, which can set or get the HTML content of the node:
Tdobj.html (Inputtext); To set the node content
var txt=tdobj.html (); To get the node HTML content

var inputobj=$ ("<input type= ' text ' >");
Here, if the parameters of the $ () method are generic HTML text, you can create a DOM node and wrap it into a jquery object. The following series of CSS code is chained, since most of the jquery methods return the JQuery object that executes the method, This can be used to write code that gives jquery.

In response to the KeyUp event when handling the carriage return and ESC keystrokes on a text box, in jquery, an event parameter can be defined on the parameter function of a method of events, and jquery masks the browser's event differences and passes to us an available event object. There is a which property on this event object to get the key value of the keyboard key.
CSS Code :
TABLE{BORDER:1PX solid black;/* Fixed the border between the cells cannot be merged with the problem */border-collapse:collapse;width:400px;} Table td{border:1px solid black;width:50%;} Table th{border:1px solid black;width:50%;} Tbody th{background: #A38ae9;}
CSS code has nothing to say, here is the simplest CSS style and the code is very small. The power of jquery just realized that the next combat will be more easy, hope to learn more knowledge, increase the amount of code.