Home > Web Front-end > JS Tutorial > Summary of common methods and techniques for operating tables with jQuery_jquery

Summary of common methods and techniques for operating tables with jQuery_jquery

WBOY
Release: 2016-05-16 16:52:24
Original
936 people have browsed it

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="";
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());
}
}) ;
}


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template