zoukankan      html  css  js  c++  java
  • 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>
    二、操作
    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)"));
  • 相关阅读:
    Python OpenCV
    Model忽略模型,不生成表创建语句
    GZSales.Electron生成记录
    Electron-Build打包成安装包错误,下载依赖,下载不来winCodeSign,或者下载很慢
    electron npm install缓存
    electrron npm install报错
    VS 自定义生成 Directory.Build.props Directory.Build.targets
    我的物联网项目(二十二) 微服务分库查询优化
    我的物联网项目专题移到网站:http://51jdk.com
    我的物联网项目(十四) 分布式事务
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1835314.html
Copyright © 2011-2022 走看看