jquery操作table表格

分手后的思念是犯贱 2022-05-24 10:12 255阅读 0赞

#     #

一、数据准备  
    <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", "");

<table style="margin:0px;padding:0px;border:1px solid #C0C0C0;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;background-color:rgb(254,254,242);height:162px;width:759px;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">(6)隐藏列，比如隐藏第二列：</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;">$("#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", "");</pre> 
    <div> 
     <br> 
    </div></td> 
  </tr> 
 </tbody> 
</table>