Jquery allows you to view, delete, and modify data in a table.

Jquery allows you to view, delete, and modify data in a table.

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

 View modification and Deletion
 <Script src = "http://libs.baidu.com/jquery/2.0.0/jquery.js"> </script> <script src = "table. js"> </script>
 
 

  
  
 
   
 
    
Name
 
    
Age
 
    
Position
 
    
Salary
 
    
Operation
 
   
 
   
 
    
Zhang San
 
    
24
 
    
Engineer
 
    
8000
 
    
View Delete changes
 
   
 
  
 
 
Name:
Age:
Position:
Salary:
Close

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

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;" >$ (document ). ready (function () {$ ('. view '). click (function () {// Add the mask layer var maskHeight = $ (document ). height (); var maskWidth = $ (document ). width (); $ (''). 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.