Summary of common methods and techniques for operating tables with jQuery_jquery

The following is a list of 13 functions commonly used by jQuery to operate tables:

1. The row changes color when the mouse moves

Copy the code The code is as follows:

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

Method 2:

Copy code The code is as follows:

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

2. Different colors for odd and even rows

Copy the code 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 line

Copy code 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

Copy the code The code is as follows:

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

5. Delete a row

Copy code The code is as follows:

// 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

Copy code The code is as follows:

// 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 certain cell

Copy code The code is as follows:

// Set table1, The value of the first td of the second tr.
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// Get table1, the first td of the second tr value.
$('#table1 tr:eq(1) td:nth-child(1)').html();

8. Insert a row

Copy code The code is as follows:

// Insert a line after the second tr
$(' Insert 3InsertInsertInsert').insertAfter( $('#table7 tr:eq(1)'));

9. Get the value of the cell specified in each row

Copy code 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 none

Copy code The code is as follows:

//Method zero:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // Add effects to the currently bound sub-selections
});

//Method 1:
//Select all or not select all. The parameter passed in is event. For example: 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 var tr=$(trlist[i]);
var input=tr.find("INPUT[type=' checkbox']");
input.attr("checked",chall.checked);
}
}
//Method 2:
//Select all or none The parameter passed in is this, such as: checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox ']");
input.attr("checked",evt.checked);
}
}
//Method 3:
//Select all or none The input parameter is 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 The parameter passed in is this. For example: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr( "checked",evt.checked);
}

11. The client dynamically adds rows

Copy code The code is as follows :

function btnAddRow(){
//The row number starts from 0, and the last row is the add, delete, save button, so subtract 2
var rownum=$( "#table1 tr").length-2;
var chk="";
var text="";
var sel="MaleFemale";
var row="" chk "" text "" sel "" text "" text "";
$(row).insertAfter($("#table1 tr:eq(" rownum ")") ;
The code is as follows:

Only one row can be deleted at a time. An error occurs 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                                                            Better, you can delete multiple records at once function btnDeleteRow(){ $("#table1 tr").each(function(i){ var chk=$(this).find(" input[type='checkbox']"); if(chk.attr("id")!="checkall"){//The title row cannot be deleted   if(chk.attr("checked") ; 🎜>

Copy code


The code is as follows:

function btnSaveClick(){
//I don’t know how to set multiple filter conditions in the find() method, so I can’t get the value of the select list below
//$(" #table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//}); ='text']").length>0){
                 alert($(this).find("input[type='text']").val()); (this).find("select").length>0)
{
alert($(this).find("select").val());
}
}) ;
}