Excerpt from: http://www.jb51.net/article/48943.htm Although the layout of the page is now div+css, there are many advantages to using table in many places, it is convenient to display data with table, The following summarizes the jquery Operation table TR TD commonly used methods, memorize these operating skills, the next time you use, will make you a duck, improve development efficiency
The following lists the features that are commonly used by the 13 jquery operations table:
1. Mouse Moving Line Color
Copy CodeThe code is as follows: $ (' #table1 tr '). Hover (function () {
$ (this). Children (' TD '). addclass (' hover ')
}, function () {
$ (this). Children (' TD '). Removeclass (' hover ')
});
Method Two:
Copy CodeThe code is as follows:
$ ("#table1 tr:gt (0)"). Hover (function () {
$ (this). Children ("TD"). AddClass ("hover");
}, function () {
$ (this). Children ("TD"). Removeclass ("hover");
});
2. Odd and even rows of different colors
Copy CodeThe code is as follows: $ (' #table1 tbody tr:odd '). CSS (' Background-color ', ' #bbf ');
$ (' #table1 tbody tr:even '). CSS (' Background-color ', ' #ffc ');
Operation class
$ ("#table1 tbody tr:odd"). AddClass ("odd");
$ ("#table1 tbody Tr:even"). AddClass ("even");
3. Hide a row
Copy CodeThe 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
Copy CodeThe code is as follows: $ (' #table1 tr td::nth-child (3) '). Hide ();
5. Delete a row
Copy CodeThe code is as follows://delete all rows except the first line
$ (' #table1 tr:not (: First) '). Remove ();
Delete the specified line
$ (' #table1 tr:eq (3) '). Remove ();
6. Delete a column
Copy CodeThe code is as follows://Remove all columns except the first column
$ (' #table1 tr th:not (: Nth-child (1)) '). Remove ();
$ (' #table1 tr td:not (: Nth-child (1)) '). Remove ();
Delete first column
$ (' #table1 tr td::nth-child (1) '). Remove ();
7. Get (set) the value of a cell
Copy CodeThe code is as follows://Set Table1, the value of the first TD of the 2nd tr.
$ (' #table1 tr:eq (1) td:nth-child (1) '). HTML (' value ');
Gets the value of Table1, the first TD of the 2nd tr.
$ (' #table1 tr:eq (1) td:nth-child (1) '). html ();
8. Insert a row
Copy CodeThe code is as follows://Insert a row after the second TR
$ (' <tr><td> insert 3</td><td> insert </td><td> Insert </td><td> Insert </td>< /tr> '). InsertAfter ($ (' #table7 tr:eq (1) '));
9. Get the value of the cell specified in each row
Copy CodeThe 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 select All
Copy CodeThe code is as follows:
Method 0:
$ (' #all '). On (' click ', function () {
$ (' input.checksub '). Prop (' checked ', this.checked); Adds an effect to the child selection that is currently bound together
});
Method One:
Select All or do not select this incoming parameter is an event such as: Checkall (event)
function Checkall (evt) {
Evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcelement;
var tbl=$ ("#table1");
var trlist=tbl.find ("tr");
for (Var i=1;i<trlist.length;i++) {
var tr=$ (Trlist[i]);
var input=tr.find ("Input[type= ' checkbox ']");
Input.attr ("Checked", chall.checked);
}
}
Method Two:
Select All or do not select this incoming parameter is this example: Checkall (This)
function Checkall (evt) {
var tbl=$ ("#table1");
var trlist=tbl.find ("tr");
for (Var i=1;i<trlist.length;i++) {
var tr=$ (Trlist[i]);
var input=tr.find ("Input[type= ' checkbox ']");
Input.attr ("Checked", evt.checked);
}
}
Method Three:
Select All or do not select this incoming parameter is this example: Checkall (This)
function Checkall (evt) {
$ ("#table1 tr"). Find ("input[type= ' checkbox ']"). each (function (i) {
$ (this). attr ("Checked", evt.checked)
});
}
Method Four:
Select All or do not select this incoming parameter is this example: Checkall (This)
function Checkall (evt) {
$ ("#table1 tr"). Find ("input[type= ' checkbox ']"). attr ("Checked", evt.checked);
}
11. Client Dynamically adding rows
Copy CodeThe code is as follows:
function Btnaddrow () {
The line number starts at 0, and the last row is added, deleted, saved, and minus 2.
var rownum=$ ("#table1 tr"). Length-2;
var chk= "<input type= ' checkbox ' id= ' Chk_" +rownum+ "' name= ' Chk_" +rownum+ "'/> ';
var text= "<input type= ' text ' id= ' txt_" +rownum+ "' name= ' Txt_" +rownum+ "' width= ' 75px '/> ';
var sel= "<select id= ' Sel_" +rownum+ "' ><option value= ' 1 ' > Male </option><option value= ' 0 ' > female </ Option></select> ";
var row= "<tr><td> +chk+" </td><td> "+text+" </td><td> "+sel+" </td><td > "+text+" </td><td> "+text+" </td></tr> ";
$ (row). InsertAfter ($ ("#table1 tr:eq (" +rownum+ "));
}
12. Client Deletes a row
Copy CodeThe code is as follows:
Only one row can be deleted at a time, error when deleting multiple rows
function Btndeleterow () {
$ ("#table1 tr"). Find ("input[type= ' checkbox ']"). each (function (i) {
if ($ (this). attr ("checked")) {
if (i!=0) {//Cannot delete Row headers
$ ("#table1 tr:eq (" +i+ ")"). Remove ();
}
}
});
}
This is better than the top one. Delete multiple records
function Btndeleterow () {
$ ("#table1 tr"). each (function (i) {
var chk=$ (this). Find ("input[type= ' checkbox ']");
if (chk.attr ("id")! = "Checkall") {//Cannot delete header row
if (chk.attr ("checked")) {
$ (this). Remove ();
}
}
});
}
13. Client Save
Copy CodeThe code is as follows:
function Btnsaveclick () {
I don't know how to set multiple filters in the Find () method, so I don't get the value of the select list.
$ ("#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 ());
}
});
}
A summary of common methods and techniques for the jquery Operation table (table)
