登录 | 注册

优就业jQuery教程-jQuery操作table表格

首页 > Web前端 > JQuery 2016-10-19 17:43:43 浏览次 共 条评论

收藏赞(分享
一、数据准备  

<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", "");

免责声明:本文来源于博客园,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
相关文章
优就业WEB前端教程-关于jquery跨域请求方法
优就业WEB前端教程-关于jquery跨域请求方法
优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结
优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结
优就业 jQuery 教程-jQuery 基础总结
优就业 jQuery 教程-jQuery 基础总结
优就业jQuery教程-jQuery Mobile Slider Widget 使用js控制
优就业jQuery教程-jQuery Mobile Slider Widget 使用js控制
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博