jquery操作table表格

標籤：

一、資料準備  
<table id="table1">  
    <tr><th>文章標題</th><th>文章分類</th><th>發布時間</th><th>操作</th></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
</table>  
<table id="table2">  
    <tr><td>文章標題</td><td>文章分類</td><td>發布時間</td><td>操作</td></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
</table>  
<table id="table3">  
    <thead>  
        <tr><td>文章標題</td><td>文章分類</td><td>發布時間</td><td>操作</td></tr>  
    </thead>  
    <tbody>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    </tbody>  
</table>  
<table id="table4">  
    <thead>  
        <tr><td>文章標題</td><td>文章分類</td><td>發布時間</td><td>操作</td></tr>  
    </thead>  
    <tbody>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
        <tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>  
        <tr><td>測試3</td><td>測試</td><td>測試</td><td>測試</td></tr>  
    </tbody>  
</table>  

二、操作
<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)"));

//刪除指定行（第二行） $("#table3 tr:gt(0):eq(1)").remove();

(2)刪除列，比如刪除表格中的第二列：

//eq:擷取子項目索引從 0 開始，先刪除表頭$("#table3 tr th:eq(1)").remove();//nth-child:擷取子項目從 1 開始$("#table3 tr td:nth-child(2)").remove();

 (3)刪除其它行，比如第二行之外的所有行：

 $("#table3 tr:gt(0):not(:eq(1))").remove();

(4)刪除其它列，比如第二列之外的所有列：

//先刪除表頭$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();

 (5)隱藏行，比如隱藏第二行：

 $("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//顯示//$("#table3 tr:gt(0):eq(1)").css("display", "");

(6)隱藏列，比如隱藏第二列：

$("#table3 tr th:eq(1)").hide(); $("#table3 tr td:nth-child(2)").hide();//或者//$("#table3 tr th:eq(1)").css("display", "none");//$("#table3 tr td:nth-child(2)").css("display", "none");//顯示//$("#table3 tr th:eq(1)").css("display", "");//$("#table3 tr td:nth-child(2)").css("display", "");

</script>

jquery操作table表格