Detailed description of the table instances that can be edited using jQuery [Download demo source code] And jquerydemo

Detailed description of the table instances that can be edited using jQuery [Download demo source code] And jquerydemo

This example describes the tables that can be edited by jQuery. We will share this with you for your reference. The details are as follows:

Today, I will explain how to use jQuery + js + css to edit tables. Next, let's briefly summarize how to implement this small example.

Step 1: Compile the html code as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
After analyzing the code above, we can easily see that the table can contain thead and tbody. the header content can be placed in th. Let's run it and see our results:

From the above running results, we can easily see that the basic outline of the table has been displayed, but it seems to have a little less taste. Next, let's set the style of the table, let's write the css Code as follows:
Table {border: 1px solid black;/* the borders 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 ;}
Analyze the code above. table {} is called as a tag selector, which can affect all the tables on the entire page; table td {} indicates all the td contained in the table. You can use broder-collapse: collapse to merge the cell borders in the table. Next, let's run it again to see the effect:

The above running effect is very close to what we need to achieve, but it is still not easy to edit. Then, the code in js corresponds to it, in js, we also need to create two files, one jquery and one editTable. In view of the large amount of jquery code, the editor has uploaded relevant resources. If you have any need, you can download the link at the end of the article. Then, we will compile the ueditTable code to add behavior capabilities to the finishing page:
// You must first use Javascript to solve the problem where the background color of some odd/even rows is different. // $ (document ). ready (function () {//}); // simplified ready statement $ (function () {// find all the odd rows in the table content area. // use even to return the element whose subscript is an even number from all tr elements returned by tbody tr, these elements are actually the odd rows in the expected tbody $ ("tbody tr: even" ).css ("background-color", "# ECE9D8 "); // We Need to find all the student ID cells var numTd = $ ("tbody td: even"); // register the mouse-clicked event numTd for these cells. click (function () {// find the td clicked by the current mouse. this corresponds to the td var tdObj =$ (this); if (tdObj. children ("input "). length> 0) {// input in the current td, do not execute click processing return false;} var text = tdObj.html (); // clear the content in td tdObj.html (""); // create a text box // remove the border of the text box // set the text font size in the text box to 16px // make the text box width the same as the width of td // set the background color of the text box // you need to put the content in the current td into the text box // Insert the text box into the td var inputObj = $ ("<input type = 'text'>" detail .css ("border-width ", "0 "). css ("font-size", "16px "). width (tdObj. width ()). css ("background-color", tdobj.css ("background-color ")). val (text ). appendTo (tdObj); // It is the inputObj selected after the text box is inserted. trigger ("focus "). trigger ("select"); inputObj. click (function () {return false ;}); // process the inputObj operation by pressing the carriage return and esc buttons in the text box. keyup (function (event) {// obtain the key value var keycode = event for the currently pressed keyboard. which; // if (keycode = 13) when the carriage return is processed {// obtain the content var inputtext =$ (this) in the current text box ). val (); // modify the content of td to the content in the text box tdObj.html (inputtext);} // process the situation of esc if (keycode = 27) {// restore the content in td to text tdObj.html (text );}});});});
The running effect is as follows:

Click here to download the complete instance code.