jquery Operation Table Tips Large Rollup _jquery

This article summarizes the techniques for jquery operation table. Share to everyone for your reference, specific as follows:

1. Mouse Move Line discoloration

Method One: jquery hover (Fun (), fun ()) method, parameter one: The first method is to add style functionality, parameter two: The second method is to cancel the style feature

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

Method Two:

$ ("#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

$ ("#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 one line

Copy Code code as follows:

$ ("#table1 tbody tr:eq (3)"). Hide ();

4. Hide a column

Method One:

Copy Code code as follows:

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

Method Two:

Copy Code code as follows:

$ ("#table1 tr"). each (function () {$ (' Td:eq (3) ', this). Hide ()});

5. Delete a row

Deletes all rows except the first line
$ ("#table1 Tr:not (: First)"). Remove ();
Deletes the specified line
$ ("#table1 Tr:eq (3)"). Remove ();

6. Delete a column

Deletes all columns except the first column
$ ("#table1 tr th:not (: Nth-child (1))"). Remove ();
$ ("#table1 tr td:not (: Nth-child (1))"). Remove ();
Deletes the first column
$ ("#table1 tr td::nth-child (1)"). Remove ();

7. Get (set) the value of a cell

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 one line:

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

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

10, select All or do not select all

//Method One://Select all or all do not select this incoming parameter is event such as: Checkall (event) function Checkall (evt) {Evt=evt?evt:windo
 W.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 all do not select this passed 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 all do not select this passed parameter to this example: Checkall (this) function Checkall (evt) {$ ("#table1 tr"). Find ("input[type= ' checkbox '")
. each (the function (i) {$ (this). attr ("Checked", evt.checked)}); //Method Four://Select all or all 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 adding rows, deleting rows

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= ' che
Ckbox ' 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+ ")); //client Deletes a row///////////////////////// (i)
{if ($ (this). attr ("checked")) {if (i!=0)//Cannot delete row header {$ ("#table1 tr:eq (" +i+) "). Remove ();}}); //This is better than the above, 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 ();}}); }//Client Save function Btnsaveclick () {//find () method I don't know how to set multiple filter criteria for the moment, so the value of the select list//$ ("#table1 tr TD") is not found below. Find ("input[ Type= ' text '] "| |
"select"). each (function (i) {//alert ($ (this). Val ()); $ ("#table1 tr"). Find ("TD"). each (the function (i) {if ($ (this). Find ("input[type= ' text ')"). Length>0) {alert ($).
Find ("input[type= ' text ']"). Val ());
else if ($ (this). Find ("select"). length>0 {alert ($ (a). Find ("select"). val ());}});

 }

<style type= "Text/css" > hover {background-color:red;} </style> <table id= "table1" border= "1" cellpadd ing= "0" cellspacing= "0" > <tr> <th> <input type= "checkbox" id= "Checkall" onclick= "CheckAll1" (This)
> </th> <th> name </th> <th> sex </th> <th> password </th> <th> address </th>
</tr> <tr> <td> <input type= "checkbox" id= "Checkbox1"/> </td> <td> John </td> <td> men </td> <td>zhangsan</td> <td> Shanghai </td> </tr> <tr> <td> < Input type= "checkbox" id= "Checkbox2"/> </td> <td> Dick </td> <td> man </td> <td>lisi
</td> <td> anqing </td> </tr> <tr> <td> <input type= "checkbox" id= "Checkbox3"/>
</td> <td> Harry </td> <td> men </td> <td>beijing</td> <td> Beijing </td> </tr> <tr> <td> <input type= "checkbox" id= "checkbox4 "/> </td> <td> anonymous </td> <td> women </td> <td>wumingshi</td> <td> Shanghai < /TD> </tr> <tr> <td> <input type= "checkbox" id= "Checkbox5"/> </td> <td> Mr. Zhao </ Td> <td> men </td> <td>zhaolaoshi</td> <td> zhejiang </td> </tr> <tr> <td colspan= "5" align= "center" > <input type= "button" id= "Btnadd" runat= "Server" value= "Add" onclick= "Btnaddrow" () "/ > <input type= "button" id= "Btndelete" runat= "server" value= "delete" onclick= "Btndeleterow ()"/> <input type= "

 Button "id=" Btnsave "runat=" Server "value=" save "onclick=" Btnsaveclick () "/> </td> </tr> </table>

I hope this article will help you with your jquery programming.