Summarize common jquery Operations table TR TD method

Although the layout of the page is now div+css, but many places use table still has many advantages, using table to display data is more convenient, the following summarizes the jquery Operation table TR TD commonly used methods, memorize these operating skills, the next time to use, Will make you a duck in the fish, improve development efficiency.

1. Mouse Moving Line Color

$ ("#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. Odd and even rows of different colors

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

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

4. Hide a column

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

Method Two:

[HTML] View plain copy

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

5. Delete a row

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

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

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:

< strong >//Insert a row after the second TR

$ ("< TR > < td > Insert 3 </td > < td > Insert </TD > < td > Insert </TD > < td > Plug into </td > </tr > "). InsertAfter ($ (" #table7 tr:eq (1) ")); </strong >

9. Gets 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 select All

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, the client dynamically add rows, delete rows

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 & Gt < td > "+text+" </td > < td > "+text+" </td > </tr > ";

$ (row). InsertAfter ($ ("#table1 tr:eq (" +rownum+ "));

}

Client deletes a row

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 ();

}  }  }); } //Client Save

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 ());

}  }); }

Summarize common jquery Operations table TR TD method