JQuery -- edit a table

JQuery -- edit a table

We often encounter table operations. I still remember that when I first learned about the niujiao news and publishing system, I followed the video to perform basic table operations, but I had no idea about its principles and concepts, it only follows the instructor's operations. Through this study, we have a better understanding and knowledge of table operations.

First, let's take a look at its effect:

 

Implementation process:

HTML code:

 

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

Click the table to modify it.
Student ID	Name
1	Wang pengbo
2	Victor
3	Wangpengbo
4	Wang

 

 

Code in Javascript:

 

// The background color of the internal parity line needs to be different through js $ (function () {// find all odd rows except the first tr in the table content area // use even to retrieve all elements returned through tbodytr, returns $ ('tbody tr: even'background .css ('background-color', '# ece9d8') if the array subscript is an even number '); // All student ID cells need to be found // $ ('tbodytd: even'0000.css ('background-color', 'red'); var numTd =$ ('tbodytd: even '); // register the numTd event with the mouse click for these tables. click (function () {// find the td when the mouse clicks. this corresponds to the id vartdobj =$ (this); if (tdobj. children ('input '). length> 0) {// input in the current td, do not execute click processing returnfalse;} vartext=tdobj.html (); // clear the content in td tdobj.html (''); // create a text box // remove the border of the text box // set the text size in the text box to 16px // make the text box width the same as the width of the table // set the text box background color // you need to set the current td put the content in the text box // Insert the text box, appendTo method can append a node to the end of all the child nodes of the other node varinputObj = $ (
 
  
Background ('background-color ')). val (text ). appendTo (tdobj); // Insert the text box and select inputObj. trigger ('focal '). trigger ('select'); // inputObj. get (0 ). select (); inputObj. click (function () {returnfalse; // clear an HTML code after you click td}) // process the text box and press enter and esc to operate inputObj. keyup (function (event) {// obtain the key value varkeycode = event for the currently pressed keyboard. which; // if (keycode = 13) when the carriage return is processed {// obtain the content of the current text box varinputtext =$ (this ). val (); // modify the content in td to the content in the text box tdobj.html (inputtext);} // if (keycode = 27) when processing esc) {// restore the content in td to text tdobj.html (text );}})})})
 

 

Code in the Css style:

 

Table {border: 1px solid black;/* border exists on the outer side of the table */border-collapse: collapse;/* fixed the problem that borders between cells cannot be merged */width: 400px ;} table td {border: 1px solid black; width: 50%;} table th {border: 1px solid black; width: 50%;} tbody th {background-color: # A3BAE9 ;}

 

 

Here we need to apply a JQuery file, but the main difficulty is also here. However, there is no in-depth research on this currently. We only need to be able to find the information we need from JQuery and implement our functions using the methods it contains.

In this example, we need to pay attention to the color settings of the parity line. If JQuery is not used, it is relatively difficult and complicated. But there is already an encapsulated method in JQuery. The even method is used to obtain odd rows, while the odd method is used to obtain even rows.

 

Instance summary:

This is mainly for table operations. As can be seen from examples, it can also be seen as a tag selector; there is also the use of JQuery, the methods will bring me a lot of convenience, mastering these methods is what we need to do at this stage. Through the study of this small instance, I have a further understanding of js learning, especially when I am working on projects, there are many places where js and JQuery are used, I feel like I can't help it. However, after these instances, you cannot grasp them, but at least you have found the starting point. Therefore, when learning, you must do it yourself, even for seemingly simple examples.