Jquery allows you to view, delete, and modify tables. jquery allows you to view tables.

Jquery allows you to view, delete, and modify tables. jquery allows you to view tables.

First of all, when learning javascript, we have some operations in tables. Jquery is a lightweight javascript library compatible with multiple browsers, and its core philosophy is to write less, do more.

Now let's use the learned Jquery to view and delete changes in a table and feel the strength of Jquery.

Step 1: compile an html page

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Li Si, Wang Wu and Zhang San are added by themselves.


Note:Jquery 1.10.2 uses Baidu CDN instead of local files.

Step 2: Write styles
#table{border:1px solid #abcdef;border-collapse:collapse;width:600px;}tr{height:30px;}th {border:1px solid #abcdef;}td{border:1px solid #abcdef;text-align:center;}td a{     margin-right:5px ;color:#f00;}.popDiv{width:500px;padding:10px;border:1px solid red;position:absolute;left:50%;top:100px;background:#fff;display:none;z-index:4;}.popDiv p{border-bottom:1px solid red;}
Final Effect

Final: js code written

$ (Document ). ready (function () {$ ('. view '). click (function () {// Add the mask layer var maskHeight = $ (document ). height (); var maskWidth = $ (document ). width (); $ ('<div class = "mask"> </div> '). appendTo ($ ('body'); Parameters ('div.mask'mirror.css ({'opacity ': 0.4, 'background': '# 000', 'position': 'solte', 'left ': 0, 'top': 0, 'height': maskHeight, 'width': maskWidth, 'z-Index': 2 }); // obtain the table data var arr = []; $ (this ). parent (). siblings (). each (function () {arr. push ($ (this ). text () ;}); $ ('. popDiv '). show (). children (). each (function (I) {$ (this ). children ('span '). text (arr [I]) ;}); // close $ ('. close '). click (function () {$ (this ). parent (). hide (); $ ('. mask '). remove (); // note that hide cannot be used here, because mask} will be generated continuously;}); // Delete $ ('. del '). click (function () {$ (this ). parents ('tr '). remove ();});});
When you click to view:
Click "Close mask disappears" and click "delete" to delete it. If you are interested in modifying the code, you can write it yourself. I believe that Jquery, which has written the display and mask functions in js, has realized its power.

Conclusion: This feature is used when you write and Remove masks and click Close. hide but under the Firefox debugger, it is observed that each time you click to view and close it, the mask layer disappears, but each time a div is generated under the DOM tree, you have to remove it. If the function is not normal, everything will be easy. The most important thing is how to optimize the Code to make it more efficient.