JQuery Table operations tips _ jquery

This article mainly introduces jQuery's Table operations skills. Examples of jQuery's common tips for Table mouse response, style modification, and addition and deletion are summarized, for more information about jQuery Table operations, see the following section. We will share this with you for your reference. The details are as follows:

1. Move the mouse to change color

Method 1: hover (fun () and fun () methods in jQuery. Parameter 1: the first method is to add the style function, and the second method is to cancel the style function.

$("#table1 tr").hover(function(){$(this).children("td").addClass("hover")},function(){$(this).children("td").removeClass("hover")})

Method 2:

$("#table1 tr:gt(0)").hover(function() {$(this).children("td").addClass("hover");}, function() {$(this).children("td").removeClass("hover");});

2. Different colors of parity rows

$("#table1 tbody tr:odd").css("background-color", "#bbf");$("#table1 tbody tr:even").css("background-color","#ffc");$("#table1 tbody tr:odd").addClass("odd")$("#table1 tbody tr:even").addClass("even")

3. Hide a row

The Code is as follows:

$ ("# Table1 tbody tr: eq (3)"). hide ();

4. Hide a column

Method 1:

The Code is as follows:

$ ("# Table1 tr td: nth-child (3)"). hide ();

Method 2:

The Code is as follows:

$ ("# Table1 tr"). each (function () {$ ("td: eq (3)", this). hide ()});

5. delete a row

// Delete all rows except the first row $ ("# table1 tr: not (: first )"). remove (); // Delete the specified row $ ("# table1 tr: eq (3 )"). remove ();

6. delete a column

// Delete all columns except the first column $ ("# table1 tr th: not (: nth-child (1 ))"). remove (); $ ("# table1 tr td: not (: nth-child (1 ))"). remove (); // Delete the first column $ ("# table1 tr td: nth-child (1 )"). remove ();

7. Get (SET) the value of a cell.

// Set the first td value of table1 and 2nd tr. $ ("# Table1 tr: eq (1) td: nth-child (1)" pai.html ("value"); // get table1, the value of the first td of the first 2nd tr. $ ("# Table1 tr: eq (1) td: nth-child (1)" pai.html ();

8. Insert a row:

// Insert a row after the second tr $ ("Insert 3InsertInsertInsert"). InsertAfter ($ (" # table7 tr: eq (1 )"));

9. Get the value of the specified cell in each row

var arr = [];$("#table1 tr td:nth-child(1)").each(function (key, value) {arr.push($(this).html());});var result = arr.join(',');

10. Select all or none

// Method 1: // select all or do not select this input parameter as event, for example: checkAll (event) function checkAll (evt) {evt = evt? Evt: window. event; var chall=evt.tar get? Evt.tar get: evt. srcElement; var tbl = $ ("# table1"); var trlist = tbl. find ("tr"); for (var I = 1; I
 
  

  
11. dynamically add and delete rows on the client
  

  
Function btnAddRow () {// The row number starts from 0, and the last row is the add, delete, and save button line. Therefore, 2var rownum = $ ("# table1 tr") is subtracted "). length-2; var chk =""; Var text =""; Var sel ="MaleFemale"; Var row =""+ Chk +""+ Text +""+ Sel +""+ Text +""+ Text +""; $ (Row ). insertAfter ($ ("# table1 tr: eq (" + rownum + ")");} // The client deletes a row. // only one row can be deleted at a time, function btnDeleteRow () {$ ("# table1 tr "). find ("input [type = 'checkbox']"). each (function (I) {if ($ (this ). attr ("checked") {if (I! = 0) // The row title {$ ("# table1 tr: eq (" + I + ")") cannot be deleted ")"). remove () ;}}) ;}// this is better than the preceding one. You can delete multiple record functions btnDeleteRow () {$ ("# table1 tr "). each (function (I) {var chk = $ (this ). find ("input [type = 'checkbox']"); if (chk. attr ("id ")! = "Checkall") // the header row {if (chk. attr ("checked") {$ (this ). remove () ;}}) ;}// the client saves function btnSaveClick () {// find () method. I do not know how to set multiple filtering conditions for the moment, therefore, the value of the select list is not obtained below // $ ("# table1 tr td "). find ("input [type = 'text']" | "select "). each (function (I) {// alert ($ (this ). val (); //}); $ ("# table1 tr "). find ("td "). each (function (I) {if ($ (this ). find ("input [type = 'text']"). length> 0) {alert ($ (this ). find ("input [type = 'text']"). val ();} else if ($ (this ). find ("select "). length> 0) {alert ($ (this ). find ("select "). val ());}});}
  

  

  
   
  

    
   
 
    
 
     
 
     
Name
 
     
Gender
 
     
Password
 
     
Address
 
    
 
    
 
     
 
     
Zhang San
 
     
Male
 
     
Zhangsan
 
     
Shanghai
 
    
 
    
 
     
 
     
Li Si
 
     
Male
 
     
Lisi
 
     
Anqing
 
    
 
    
 
     
 
     
Wang Wu
 
     
Male
 
     
Beijing
 
     
Beijing
 
    
 
    
 
     
 
     
Anonymous
 
     
Female
 
     
Wumingshi
 
     
Shanghai
 
    
 
    
 
     
 
     
Instructor Zhao
 
     
Male
 
     
Zhaolaoshi
 
     
Zhejiang
 
    
 
    
 
     
 
    
 
   
   
  
  

  
I hope this article will help you with jQuery programming.