1. Move the mouse to change the line
The code is as follows:
$ (' #table1 tr '). Hover (function () {
$ (this). Children (' TD '). addclass (' hover ')
}, function () {
$ (this). Children (' TD '). Removeclass (' hover ')
});
Method Two:
The 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
The 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
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 line
$ (' #table1 tr:not (: First) '). Remove ();
Delete the specified line
$ (' #table1 tr:eq (3) '). Remove ();
6. Delete a column
The 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
The 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
The 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
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 select All
The 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
The 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
The 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
The 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 ());
}
});
}
Some of the jquery table operations (2)
