JQuery之表格常见操作技巧

移动鼠标行变色$('#table1 tr').hover(function(){ $(this).children('td').addClass('hover')}, function(){

移动鼠标行变色

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

//:gt(n)匹配所有给定大于给定索引值$("#table1 tr:gt(0)").hover(function() {     $(this).children("td").addClass("hover"); }, function() {     $(this).children("td").removeClass("hover"); });

奇偶不同色

$('#table1 tbody tr:odd').css('background-color', '#bbf');//odd为奇$('#table1 tbody tr:even').css('background-color','#ffc');//even为偶//操作class$("#table1 tbody tr:odd").addClass("odd");$("#table1 tbody tr:even").addClass("even");

隐藏一行

$('#table1 tbody tr:eq(3)').hide();//:eq(n)匹配一个给定索引元素$("#table1 tr td::nth-child(3)").hide();//nth-child(n)匹配元素下指定索引的行$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

隐藏一列

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

删除指定行

// 删除除第一行外的所有行$('#table1 tr:not(:first)').remove();// 删除指定行$('#table1 tr:eq(3)').remove();

删除列

//删除指定列意外的列$('#table1 tr td:not(:nth-child(n))').remove();// 删除指定列$('#table1 tr td::nth-child(n)').remove();

全选或全不选

//方法一$('#all').on('click', function () {     //prop()获取在匹配的元素集中的第一个元素的属性值。	// 给当前一起绑定的子选择添加效果    $('input.checkSub').prop('checked', this.checked); });//方法二：//此传入的参数为this 如：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']");  //设置属性checkred  input.attr("checked",evt.checked); }}//方法三：//此传入的参数为this 如：checkAll(this)function checkAll(evt){    $("#table1 tr").find("input[type='checkbox']").each(function(i){     $(this).attr("checked",evt.checked)    });}//方法四：//此传入的参数为this 如：checkAll(this)function checkAll(evt){    $("#table1 tr").find("input[type='checkbox']")	.attr("checked",evt.checked);}

Jquery对表格操作技巧大汇总