JQuery Table operations tips summary and jquerytable skills

JQuery Table operations tips summary and jquerytable skills

This article summarizes jQuery's Table operations skills. We will share this with you for your reference. The details are as follows:

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
Copy codeThe Code is as follows: $ ("# table1 tbody tr: eq (3)"). hide ();

4. Hide a column

Method 1:
Copy codeThe Code is as follows: $ ("# table1 tr td: nth-child (3)"). hide ();
Method 2:
Copy codeThe Code is as follows: $ ("# 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>

I hope this article will help you with jQuery programming.

Articles you may be interested in:

• Usage of datatables in jQuery table plug-in
• How JS and jQuery traverse all the Table cells
• JQuery performs Table header sorting instance analysis with grouped data
• Dynamic generation of Table tables using JQuery Ajax
• How to export datatables plug-in data to excel using jquery + php
• Set table Styles using Jquery
• JQuery table plug-in datatables usage Summary
• Use the Jquery selector to calculate the total of a row in a column in the table
• JQuery implements two ways of changing the color of a table and changing the color of the mouse
• Use Jquery's Ajax method to read and convert a table to Json
• JQuery table sorting component-tablesorter example
• Example of adding, saving, and deleting table data using jquery
• Use jquery. sortElements to sort tables
• Click and drag to sort Li or Table implemented by jquery