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>