After reading the jquery video, I will make a summary. Remember to use this editable table when modifying the news category in the niujiao video.
The Ajax control interface is no longer refreshed, which easily solves the problem of modifying the category name and directly submits it to the database. This method is compared with the previous Modifier
It improves the performance, convenience, and user experience.
The jquery video once again touched on this knowledge. This in-depth analysis of this knowledge,
Here, we need to first introduce the jquery. js file, and the JS file edittable. js file and CSS style file compiled by ourselves to achieve the desired effect.
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
CSS: controls the style in a table.
Table {border: 1px solid black;/* fixed the problem that 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 ;}
Edittable. JS, the content area of the truly modifiable part
// You need to use JavaScript to solve the problem that the background color of some basic even rows in the content is different. // $ (document ). ready (function () {//}); // simplified ready statement $ (function () {// find all odd rows except the first TR in the content area of the table. // use even to retrieve all tr elements returned through tbody tr, // returns an even number of subscript elements in the array, because these elements are actually the expected technical line in the tbody $ ("tbody TR: even "2.16.css (" background-color "," # ece9d8 "); // you need to find all the student ID cells // $ (" tbody TD: even ").css (" background-color "," Red ") var numid = $ (" tbody TD: Even "); // register the mouse click event numid for these cells. click (function () {// find the current mouse and click TD. 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 of the text box to 16px // the text box width is the same as the width of the 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'>" example .css ("border-width", "0" ).css ("font-size", "16px" ).width(tdobj.width())).css ("background-color", tdobj.css ("background-color ")). val (text ). appendto (tdobj); // inputobj is 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 of the current text box var inputtext = $ (this ). 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 );}});});});
Before running:
Effect after running:
Summary:
1. the table can contain thead and tbody.
2. The contents of the header can be placed in th.
3. Table {} is called a change selector, which can affect all the tables on the page.
4. Table TD {} indicates all TD information contained in the table.
5. You can use border-collapse: collapse to merge the borders of cells in the table.
6. When TH is defined by the background color, the background color defined on TR of TH is invalid.
7. $ (function {}) is a simplified method of $ (document). Ready (function () {}).
8. $ ("tbody TR") returns all tr nodes in the tbody.
9. $ ("tbody TR: Even") returns all tr nodes with an even index value in the tbody.
Array)
The 10.css method can be used to set or obtain the CSS attributes of a node. The parameter name is the attribute name of CSS.
11. The jquery object contains the DOM node corresponding to the selector, Which is saved as an array,
12. The get method can obtain a DOM node contained in the jquery object.
13. This in function indicates the object that executes this function.
14. $ () when the parameter of the method is a DOM object, this method is equivalent to converting the DOM object to jquery
Image.
15. The children method can obtain the subnode of a node. You can specify parameters to limit the content of the subnode.
16. If the jquery object returned by the selector contains multiple DOM nodes
When such an event occurs, all DOM nodes are used for the event.
The 17.html method can be used to set or obtain the HTML content of a node.
18. The Val method can be used to obtain or set the value of a node.
19. If the $ () method parameter is a correct HTML text, you can create a DOM node and encapsulate
Jquery object. For example, $ ("<input type = 'text'/> ")
20. Most jquery Methods return jquery objects that execute this method. Therefore, you can use the chained method to write the code for jquery. Note: Java's stringbuffer also has
21. The appendto method can append a node to the end of all the child nodes of the other node.
22. Blocking event transmission can make the current node event return false
For example, it can be applied to events that do not respond. Function () {return false ;}23. Trigger method can start a javascript event.
24. The width method can be used to set or obtain the width of a node.
25. In jquery, the parameter function of an event method can define an event parameter. jquery shields the event differences in the browser and passes them to us an available event object.
26. There is a which attribute on the event object of jquery to get the key value of the keyboard key.
For example, inputobj. keyup (function (event) {var keycode = event. Which ;}27.13 indicates the Enter key, and 27 indicates the ESC key.
This is just a simple result. If you want to interact with the database, you need to learn it further (refer to Niu Yi's news publishing system ).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
