zoukankan      html  css  js  c++  java
  • JQuery操作一个表格简单示例

    jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。


    <script type="text/javascript" src="https://files.cnblogs.com/liydotnet/jquery-1.2.3.js"></script>

    <style type="text/css">
    .mainTable{ background-color:#ffcc00; 85%; margin:auto; font-size:12px}
    .mainTable td{ height:22px}
    .line{ background-color:#fffff7; height:25px}
    .line-none{ background-color:#fffff7; height:25px}
    .selected{ background-color:#fff5fa}
    .template{ background-color:#ffffdd;display:none; color:#e8f5fe}
    .mainTable a{ margin-right:6px}
    .mainTable a:link{color:#92b0dd }
    .mainTable a:visited{color:#92b0dd}
    .mainTable a:hover{color:#FF0000}
    </style>
    <table class="mainTable" cellspacing="1" cellpadding="1">
    <tbody>
    <tr class="template">
    <td style="padding-left: 5px" colspan="3"></td>
    </tr>
    <tr class="line">
    <td style="padding-left: 6px"></td>
    <td></td>
    <td style=" 30%" align="center"><a onclick="javascript:do_select(this)" href="javascript:;">选择</a> <a 

    onclick="javascript:do_add(this)" href="javascript:;">增加一行↑</a> <a onclick="javascript:do_copy(this)" href="javascript:;">复制

    此行↓</a> <a onclick="javascript:do_delete(this)" href="javascript:;">删除</a> </td>
    </tr>
    </tbody>
    </table>
    <script type="text/javascript">
    function do_select(aa)
    {
    var id=$(aa);
    id.parents("tr").addClass("selected");
    id.attr("onclick","javascript:do_reset(this)").html("取消")
    }
    function do_reset(aa)
    {
    var id=$(aa);
    id.parents("tr").removeClass("selected");
    id.attr("onclick","javascript:do_select(this)").html("选择")
    }
    function do_copy(aa)
    {
    var id=$(aa);
    var copy=id.parents("tr").clone();
    var first=copy.find("td:first");
    first.html("》"+first.html())
    id.parents("tr").after(copy);
    }
    function do_add(aa)
    {
    var id=$(aa);
    var template=$(".template").clone().attr("class","line-none");
    var add=$(".line-none");
    id.parents("tr").prev(".line-none").remove();
    template.show().find("td:eq(0)").html("我是根据模板复制的的");
    id.parents("tr").before(template);
    }
    function do_delete(aa)
    {
    var id=$(aa);
    id.parents("tr").remove();
    }
    </script>
  • 相关阅读:
    封装、权限修饰符、包、构造器
    从Discuz!NT v2.0扣出来的生成静态页面的方法
    C#中struct与class的区别
    Asp.Net中虚拟文件系统的使用
    C#生成中文验证码
    C#导入Excel表
    IIS5、IIS6、IIS7的ASP.net 请求处理过程比较
    如何保证Session值不丢失
    C#抽象类与接口的区别
    C#实现DES加密解密
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1393649.html
Copyright © 2011-2022 走看看