jquery Combat--a table that can be edited

Langfang Snow, the second snow in 15, more than 14 to a little later, docked in the 11 teaching front of the bicycle, became the most beautiful scenery of the Langfang Normal University scenic line. Remember when you used to learn CSS, have been exposed to how to write design some forms and forms of style, such as how to design the table color, interlaced and so on, related links, please click.

When learning CSS, all the settings of the table and the form, we are in the HTML code to implement, today's small part of the main to explain how to use JQUERY+JS+CSS to achieve the form of editing. Next, the small series briefly summarizes how to implement this small example.

The first step: write the HTML code, the code is as follows:

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Analyzing the above code, it is easy to see that the table can contain thead and tbody, the contents of the header can be put into th, let's run it and see our effect:

From the above effect, we can easily see that the basic outline of the table has been shown, but it seems to be a little bit less flavor, and then we set the table style, we write the CSS code, as follows:
<span style= "FONT-SIZE:18PX;" >table {border:1px Solid black;/* fixed the border between cells cannot be merged */border-collapse:collapse;width:400px;} Table TD {BORDER:1PX solid black;width:50%;} Table th {border:1px solid black;width:50%;} tbody th {background-color: #A3BAE9;  } </span>
Analyze the above code, table{} This notation, as a tag selector, can have an effect on all the table of the entire page; table td{} This notation represents all TD contained in the table ; You can merge cell borders in a table by Broder-collapse:collapse this way. Next, let's run a little bit and see how it works:
The above operation effect, has been very close to the effect we need to achieve, but still less than the heat, or can not be edited, and then, JS inside the code, corresponding, in JS we also want to build two files, a jquery a edittable, given the code of jquery more, So the small part has uploaded the relevant resources, the need for small partners can be downloaded to the link , and then we will write Uedittable Code, to organize the page to add capacity:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >//need to first solve the content part of the odd and even line of the background color of different//$ (document). Ready (function () {////});//Simplified ready notation $ (function () {// Find all the odd lines in the content area of the table//use even to return all the TR elements returned through the Tbody TR, the elements in the array that are even-numbered are returned, because these elements are actually the odd lines within the tbody we expect ("Tbody Tr:even"). CSS ("Background-color", "#ECE9D8");//We need to find all the learning numbers in cell var NUMTD = $ ("tbody td:even");//Register these cells with mouse click events Numtd.click ( function () {///Find the td,this corresponding to the current mouse click is the one that responds to click Tdvar tdobj = $ (this), if (Tdobj.children ("input"). Length > 0) {// Current TD in input, do not execute click to process return false;} var text = tdobj.html (); Clear the contents of TD tdobj.html ("");//Create a text box//Remove the border of the text box//Set the text box font size is 16px//make the width of the text box and the width of the TD the same//set the background color of the text box// You need to put the contents of the current TD in the text box//Insert the text box into TD var Inputobj = $ ("<input type= ' text ' >"). css ("border-width", "0"). CSS ("Font-size" , "16px"). Width (Tdobj.width ()). CSS ("Background-color", Tdobj.css ("Background-color")). Val (text). AppendTo (Tdobj) Inputobj.trigger ("Focus") is selected after the text box is inserted. TriGger ("select"); Inputobj.click (function () {return false;}); /handles the operation of the carriage return and ESC keys on the text box Inputobj.keyup (event) {//Gets the key value of the currently pressed keyboard var keycode = event.which;//Handling Carriage return if (keycode = = 13) { Gets the contents of the current text box as var Inputtext = $ (this). Val ();//Modify the TD content to the content in the text box tdobj.html (inputtext);} If the ESC is handled if (keycode = = 27) {//The contents of TD are restored to texttdobj.html (text);});}); </span></span></span></span>
The results are as follows:
The relevant code has the need of small partners can click to download.
  Small series of words: The blog, the small part of the main introduction of practical jquery small examples, writing can edit the table, compared to the previous study of the CSS, how to set up the table Form, the example with jquery and CSS, Let our code more flexible, realize the function of more tall, BS summary, not to be continued ...

jquery Combat--a table that can be edited