JQuery之表格常见操作技巧
JQuery之表格常见操作技巧
米线爱上烧饼 发表于2年前
JQuery之表格常见操作技巧
  • 发表于 2年前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

移动鼠标行变色

$('#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对表格操作技巧大汇总

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 3
码字总数 3515
×
米线爱上烧饼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: