A summary of common methods and techniques for jquery Operations Table (table) _jquery

The following features are common to the 13 jquery operations table:

1. Mouse Move Line discoloration

Copy Code code as follows:

$ (' #table1 tr '). Hover (function () {
$ (this). Children (' TD '). addclass (' hover ')
}, function () {
$ (this). Children (' TD '). Removeclass (' hover ')
});

Method Two:

Copy Code code as follows:

$ ("#table1 tr:gt (0)"). Hover (function () {
$ (this). Children ("TD"). AddClass ("hover");
}, function () {
$ (this). Children ("TD"). Removeclass ("hover");
});

2. Different colors of odd and even rows

Copy Code code as follows:

$ (' #table1 tbody tr:odd '). CSS (' Background-color ', ' #bbf ');
$ (' #table1 tbody tr:even '). CSS (' Background-color ', ' #ffc ');
Action class
$ ("#table1 tbody tr:odd"). AddClass ("odd");
$ ("#table1 tbody Tr:even"). AddClass ("even");

3. Hide one line

Copy Code code 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 Code code as follows:

$ (' #table1 tr td::nth-child (3) '). Hide ();

5. Delete a row

Copy Code code as follows:

Delete all rows except the first line
$ (' #table1 tr:not (: a) '). Remove ();
Delete specified line
$ (' #table1 tr:eq (3) '). Remove ();

6. Delete a column

Copy Code code 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 first column
$ (' #table1 tr td::nth-child (1) '). Remove ();

7. Get (set) the value of a cell

Copy Code code as follows:

Sets the value of the first TD for Table1, 2nd tr.
$ (' #table1 tr:eq (1) td:nth-child (1) '). HTML (' value ');
Gets the value of the first TD of Table1, 2nd tr.
$ (' #table1 tr:eq (1) td:nth-child (1) '). html ();

8. Insert a row

Copy Code code as follows:

Inserts 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 Code code as follows:

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

10. Select or select All

Copy Code code as follows:

Method 0:
$ (' #all '). On (' click ', function () {
$ (' input.checksub '). Prop (' checked ', this.checked); Add an effect to the child selection that is currently bound together
});

Method One:
Select All or do not select this passed in parameter to 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 passed in parameter to 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 passed in parameter to 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 passed in parameter to this example: Checkall (This)
function Checkall (evt) {
$ ("#table1 tr"). Find ("input[type= ' checkbox ']"). attr ("Checked", evt.checked);
}

11. Client Dynamically Add rows

Copy Code code as follows:

function Btnaddrow () {
Line number is starting from 0, the last line is new, delete, save button line so 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. Delete a row from the client

Copy Code code as follows:

Can only delete one row at a time, error 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, you can 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 Code code as follows:

function Btnsaveclick () {
In the Find () method I don't know how to set multiple filter criteria for the moment, so I don't get the value of the select list 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 ());
}
});
}