[JavaScript] [jquery] jquery operation table

Operate table with jquery

1. Move the mouse to change color
Method 1: hover (fun () and fun () methods in jquery. Parameter 1: the first method is to add the style function, and the second method is to cancel the style function.

$("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("td").removeClass("hover") }) 

Method 2:

$("#table1 tr:gt(0)").hover(function() { $(this).children("td").addClass("hover"); }, function() { $(this).children("td").removeClass("hover"); }); 

2. Different colors of parity 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 a row

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

4. Hide a column
Method 1:

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

Method 2:

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

 

5. delete a row

// Delete all rows except the first row $ ("# Table1 TR: Not (: First )"). remove (); // Delete the specified row $ ("# Table1 TR: eq (3 )"). remove ();

6. delete a column

// Delete all columns except the first column $ ("# Table1 tr TH: Not (: Nth-Child (1 ))"). remove (); $ ("# Table1 tr TD: Not (: Nth-Child (1 ))"). remove (); // Delete the first column $ ("# Table1 tr TD: Nth-Child (1 )"). remove ();

7. Get (SET) the value of a cell.

// Set the first TD value of Table1 and 2nd tr. $ ("# Table1 TR: eq (1) TD: Nth-Child (1)" pai.html ("value"); // get Table1, the value of the first td of the first 2nd tr. $ ("# Table1 TR: eq (1) TD: Nth-Child (1)" pai.html ();

8. Insert a row:

// Insert a row after the second tr $ ("<tr> <TD> insert 3 </TD> <TD> insert </TD> <TD> insert </TD> </tr> "). insertafter ($ ("# table7 TR: eq (1 )"));

 

9. Get the value of the specified cell 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 none

// Method 1: // select all or do not select this input parameter as event, for example: checkall (event) function checkall (EVT) {EVT = EVT? EVT: window. event; var chall=evt.tar get? Evt.tar get: 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 2: // select all or none of the input parameters as this, for 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 3: // select all or none of the input parameters as this, for example: checkall (this) function checkall (EVT) {$ ("# Table1 TR "). find ("input [type = 'checkbox']"). each (function (I) {$ (this ). ATTR ("checked", EVT. checked)});} // Method 4: // select all or none of the input parameters as this, for example: checkall (this) function checkall (EVT) {$ ("# Table1 TR "). find ("input [type = 'checkbox']"). ATTR ("checked", EVT. checked );}

 

11. dynamically add and delete rows on the client

Function btnaddrow () {// The row number starts from 0, and the last row is the add, delete, and save button line. Therefore, 2var rownum = $ ("# Table1 TR") is subtracted "). 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 + ")");} // The client deletes a row. // only one row can be deleted at a time, function btndeleterow () {$ ("# Table1 TR "). find ("input [type = 'checkbox']"). each (function (I) {if ($ (this ). ATTR ("checked") {if (I! = 0) // The row title {$ ("# Table1 TR: eq (" + I + ")") cannot be deleted ")"). remove () ;}}) ;}// this is better than the preceding one. You can delete multiple record functions btndeleterow () {$ ("# Table1 TR "). each (function (I) {var chk = $ (this ). find ("input [type = 'checkbox']"); If (chk. ATTR ("ID ")! = "Checkall") // the header row {If (chk. ATTR ("checked") {$ (this ). remove () ;}}) ;}// the client saves function btnsaveclick () {// find () method. I do not know how to set multiple filtering conditions for the moment, therefore, the value of the select list is not obtained 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 ());}});}

 

 

<Style type = "text/CSS">. hover {background-color: red ;} </style> <Table id = "Table1" border = "1" cellpadding = "0" cellspacing = "0"> <tr> <TH> <input type = "checkbox" id = "checkall" onclick = "checkall1 (this) "/> </Th> <TH> name </Th> <TH> gender </Th> <TH> password </Th> <TH> address </Th> </tr> <TD> <input type = "checkbox" id = "checkbox1"/> </TD> <TD> Zhang San </TD> <TD> male </TD> <TD> zhangsan </TD> <TD> Shanghai </TD> </tr> <TD> <input type = "checkbox" id = "checkbox2 "/> </TD> <TD> Li Si </TD> <TD> male </TD> <TD> Lisi </TD> <TD> Anqing </TD> </tr> <TD> <input type = "checkbox" id = "checkbox3"/> </TD> <TD> Wang Wu </TD> <TD> male </TD> <TD> Beijing </TD> </tr> <TD> <input type = "checkbox" id = "checkbox4 "/> </TD> <TD> anonymous </TD> <TD> female </TD> <TD> Wumingshi </TD> <TD> Shanghai </TD> </tr> <TD> <input type = "checkbox" id = "checkbox5"/> </TD> <TD> instructor Zhao </TD> <TD> male </TD> <TD> zhaolaoshi </TD> <TD> Zhejiang </TD> </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>