JQuery operation table (table) common methods skills summary
- 2020-03-30 02:39:18
- OfStack
Here are 13 functions commonly used in jQuery operation table:
1. Mouse moves to change color
$('#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. Odd and even rows in different colors
$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//Operation of the class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");
3. Hide a line
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
Hide a column
$('#table1 tr td::nth-child(3)').hide();
5. Delete a line
//Delete all rows except the first
$('#table1 tr:not(:first)').remove();
//Deletes 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();
Get the value of a cell
//Set the value of the first td of table1, the second tr.
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
//Gets the value of the first td for the second tr in table1.
$('#table1 tr:eq(1) td:nth-child(1)').html();
8. Insert a line
//Insert a line after the second tr
$('<tr><td> insert 3</td><td> insert </td><td> insert </td><td> insert </td></tr>').insertAfter($('#table7 tr:eq(1)'));
Gets the value of the cell specified for each row
var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');
Choose all or none
//The method of zero:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); //Adds an effect to the currently bound subselection
});
//Method one:
//Select all or none the parameter passed in is 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 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<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 the parameter passed in is this such as: 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 such as: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}
11. The client dynamically adds rows
function btnAddRow(){
//The line number starts at 0, and the last line is the new, delete, save button line so 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><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
12. The client removes a line
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){//Cannot delete a line header & NBSP;
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
This one is better than the one above. 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"){//Cannot delete header line & NBSP;
if(chk.attr("checked")){
$(this).remove();
}
}
});
}
13. 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());
}
});
}