JQuery practice-editable tables

JQuery practice-editable tables

Langfang was snowing, and the second snow in 15 years was a little later than that in 14. The bicycle parked in front of the 11 course became the most beautiful landscape of Langfang Normal University. I still remember that when I was learning css, I used to learn how to write and design some table and form styles, for example, how to design the color in the table, and how to change the color across rows. For more information, click.

When I was learning css, we implemented all the settings for tables and forms in the html code. Today, I will give you a brief explanation of the small series, how to Use JQuery + js + css to edit a table. Next, let's briefly summarize how to implement this small example.

Step 1: Compile the html code as follows:

 

<Script type = text/javascript src = js/jquery. js> </script> <script type = text/javascript src = js/editTable. js> </script>

Click the table item to edit it.
Student ID	Name
000001	Zhang San
000002	Li Si
000003	Wang Wu
000004	Zhao Liu

 

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 need it, you can download it at this link, next, we will write the ueditTable code to add behavior capabilities to the Organization 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, because these elements are actually the odd lines in the expected tbody $ (tbody tr: even0000.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 tdvar 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 of tdObj.html () in td2 (); // 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 = $ (Background (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 tdto the content of tdobj.html (inputtext);} // if (keycode = 27) when processing esc) {// restore the content in tdframe to texttdobj.html (text );}});});});

The running effect is as follows:

 

 

Editor's note: this blog post mainly introduces small examples of JQuery in practice, compiling editable tables, and comparing how to set table forms in css, in this example, jquery and css are used in combination to make our code more flexible and implement more advanced functions. Summary by BS, which is not yet complete ......