jQuery table 操作

一、数据准备
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
测试3测试测试测试

二、操作

</pre><pre name="code" class="javascript"><script type="text/javascript">
//1.鼠标移动行变色
    $("#table1 tr").hover(function(){  
        $(this).children("td").addClass("hover")  
    },function(){  
        $(this).children("td").removeClass("hover")  
    })  
    $("#table2 tr:gt(0)").hover(function() {  
        $(this).children("td").addClass("hover");  
    }, function() {  
        $(this).children("td").removeClass("hover");  
    });  

//2.奇偶行不同颜色 
    $("#table3 tbody tr:odd").css("background-color", "#bbf");  
    $("#table3 tbody tr:even").css("background-color","#ffc");   
    $("#table3 tbody tr:odd").addClass("odd")  
    $("#table3 tbody tr:even").addClass("even")  

//3.隐藏一行
    $("#table3 tbody tr:eq(3)").hide();  

//4.隐藏一列
    $("#table5 tr td::nth-child(3)").hide();  
    $("#table5 tr").each(function(){$("td:eq(3)",this).hide()});   

//5.删除一行 
// 删除除第一行外的所有行  
    $("#table6 tr:not(:first)").remove();  

//6.删除一列 
// 删除除第一列外的所有列  
    $("#table6 tr td:not(:nth-child(1))").remove();  

//7.得到(设置)某个单元格的值
//设置table7,第2个tr的第一个td的值。    
    $("#table7 tr:eq(1) td:nth-child(1)").html("value");    
    //获取table7,第2个tr的第一个td的值。    
    $("#table7 tr:eq(1) td:nth-child(1)").html();   

//8.插入一行:
//在第二个tr后插入一行  
    $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值