zoukankan      html  css  js  c++  java
  • jquery table 操作

    引用:http://www.cnblogs.com/i0air/archive/2012/03/29/2423826.html

    一、数据准备  
    <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)"));
    </script>
  • 相关阅读:
    python input函数
    linux可用内存判断
    python if-elif-else 判断
    python if判断
    python使用range()函数创建数字列表list
    python range函数
    python语法缩进
    python for循环
    python列表删除和排序
    hbctf 父亲的信
  • 原文地址:https://www.cnblogs.com/sode/p/2794967.html
Copyright © 2011-2022 走看看