Common methods and techniques for using jQuery to operate tables _ jquery

Although DIV + CSS is widely used in page layout, using table in many places still has many advantages. It is convenient to use table to display data, the following describes the methods commonly used in jQuery to operate Tabletrtd. Note these operations and skills. The next time you use it, it will make you feel like a duck, to improve development efficiency, the following lists the 13 common functions used by jQuery to operate tables:

1. Move the mouse to change color

The Code is as follows:

$ ('# Table1 tr'). hover (function (){
$ (This). children ('td '). addClass ('hover ')
}, Function (){
$ (This). children ('td '). removeClass ('hover ')
});

Method 2:

The Code is as follows:

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

2. Different colors of parity rows

The Code is as follows:

$ ('# Table1 tbody tr: odd'background .css ('background-color',' # bbf ');
$ ('# Table1 tbody tr: even'background .css ('background-color',' # ffc ');
// Operate class
$ ("# 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 ();
$ ("# Table1 tr td: nth-child (3)"). hide ();
$ ("# Table1 tr"). each (function () {$ ("td: eq (3)", this). hide ()});

4. Hide a column

The Code is as follows:

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

5. delete a row

The Code is as follows:

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

6. delete a column

The Code is as follows:

// 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.

The Code is as follows:

// Set the first td value of table1 and 2nd tr.
$ ('# Table1 tr: eq (1) td: nth-child(1+'0000.html ('value ');
// Obtain the first td value of table1 and 2nd tr.
$ ('# Table1 tr: eq (1) td: nth-child(1+'{.html ();

8. Insert a row

The Code is as follows:

// 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

The Code is as follows:

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

10. Select all or not all

The Code is as follows:

// Method zero:
$ ('# All'). on ('click', function (){
$ ('Input. checksub'). prop ('checked', this. checked); // Add an effect to the child that is currently bound together.
});

// Method 1:
// Select all or none of the input parameters 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 Var tr = $ (trlist [I]);
Var input = tr. find ("INPUT [type = 'checkbox']");
Input. attr ("checked", chall. checked );
}
}
// Method 2:
// Select all or none of the input parameters as this, for example, checkAll (this)
Function checkAll (evt ){
Var tbl = $ ("# table1 ");
Var trlist = tbl. find ("tr ");
For (var I = 1; I Var tr = $ (trlist [I]);
Var input = tr. find ("INPUT [type = 'checkbox']");
Input. attr ("checked", evt. checked );
}
}
// Method 3:
// Select all or none of the input parameters as this, for example, checkAll (this)
Function checkAll (evt ){
$ ("# Table1 tr"). find ("input [type = 'checkbox']"). each (function (I ){
$ (This). attr ("checked", evt. checked)
});
}
// Method 4:
// Select all or none of the input parameters as this, for example, checkAll (this)
Function checkAll (evt ){
$ ("# Table1 tr"). find ("input [type = 'checkbox']"). attr ("checked", evt. checked );
}

11. dynamically Add rows on the client

The Code is as follows:

Function btnAddRow (){
// The row number starts from 0, and the last row is the add, delete, and save button line minus 2
Var rownum = $ ("# table1 tr"). length-2;
Var chk ="";
Var text ="";
Var sel ="MaleFemale";
Var row =""+ Chk +""+ Text +""+ Sel +""+ Text +""+ Text +"";
$ (Row). insertAfter ($ ("# table1 tr: eq (" + rownum + ")"));
}

12. delete a row from the client

The Code is as follows:

Only one row can be deleted at a time. An error occurred while deleting multiple rows.
Function btnDeleteRow (){
$ ("# Table1 tr"). find ("input [type = 'checkbox']"). each (function (I ){
If ($ (this). attr ("checked ")){
If (I! = 0) {// The row title cannot be deleted.
$ ("# Table1 tr: eq (" + I + ")"). remove ();
}
}
});
}
This is better than the previous one. You can delete multiple records.
Function btnDeleteRow (){
$ ("# Table1 tr"). each (function (I ){
Var chk = $ (this). find ("input [type = 'checkbox']");
If (chk. attr ("id ")! = "Checkall") {// the header row cannot be deleted.
If (chk. attr ("checked ")){
$ (This). remove ();
}
}
});
}

13. Save the client

The Code is as follows:

Function btnSaveClick (){
// In the find () method, I do not know how to set multiple filtering conditions for the moment, so the values of the select list cannot be 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 ());
}
});
}