<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基于jQuery表格增加删除代码示例</title>

    <script type="text/javascript" src="./2.1.js"></script>

     <script type="text/javascript">

        $(function () {

            var show_count = 20;   //要显示的条数

            var count = 1;    //递增的开始值，这里是你的ID

            $("#btn_addtr").click(function () {

                var length = $("#dynamicTable tbody tr").length;

                //alert(length);

                if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件

                {

                    // alert($("#tab11 tbody tr").clone());

                    /**

                    *clone([Even[,deepEven]])

                      *   概                  述

                      *  克隆匹配的DOM元素并且选中这些克隆的副本。

                     *  在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用

                    */

                    $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");   //在表格后面添加一行

                    changeIndex();//更新行号

                }

            });

        });

        function changeIndex() {

            var i = 1;

            $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr

                $(this).find("input[name='NO']").val(i++);//更新行号

            });

        }

        function deltr(opp) {

            // alert($(opp).val());

            // alert(opp);  //jQuery 对象

            var length = $("#dynamicTable tbody tr").length;

            //alert(length);

            if (length <= 1) {

                alert("至少保留一行");

            } else {

                // alert($(opp).parent());

                // alert($(opp).parent().parent());

                //  ==========  1 ===========

                // $(opp).remove();//移除当前行 删除当前的元素 input

                // <input type="button" id="Button2" onclick="deltr(this)" value="删行" />

                //============  2 =====================================================

                 // $(opp).parent().remove();//移除当前 td

                 //<td><input type="button" id="Button1" onclick="deltr(this)" value="删行" /></td>

                 //============  3 ===============================================================

                  $(opp).parent().parent().remove();//移除当前行 tr

                  /**

                <tr>

                <td height="30" align="center">

                <input type="text" name="NO" size="2" value="1" />

                </td>

                <td align="center">

                <input type="text" name="start_end_time" />

                </td>

                <td align="center">

                <input type="text" name="unit_department" />

                </td>

                <td align="center">

                <input type="text" name="post" />

                </td>

                <td>

                <input type="button" id="Button1" onclick="deltr(this)" value="删行" />

                </td>

                </tr>

                  */

                changeIndex();

            }

        }

    </script>

</head>

<body>

    <div style="width:720px;margin:20px auto;">

        <!-- 作为隐藏 clone start -->

        <table id="tab11" style="display: none;border:0px solid red;">

        <tbody>

        <tr>

        <td height="30" align="center">

        <input type="text" name="NO" size="2" value="1" />

        </td>

        <td align="center">

        <input type="text" name="start_end_time" />

        </td>

        <td align="center">

        <input type="text" name="unit_department" />

        </td>

        <td align="center">

        <input type="text" name="post" />

        </td>

        <td>

        <input type="button" id="Button1" onclick="deltr(this)" value="删行" />

        </td>

        </tr>

        </tbody>

        </table>

       <!-- 作为隐藏 clone end-->

        <input type="button" id="btn_addtr" value="增行" />

        <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">

        <thead>

        <tr>

        <td height="30" align="center" bgcolor="#CCCCCC">ID</td>

        <td align="center" bgcolor="#CCCCCC">起止时间</td>

        <td align="center" bgcolor="#CCCCCC">单位/部门</td>

        <td align="center" bgcolor="#CCCCCC">职位</td>

        <td></td>

        </tr>

        </thead>

        <tbody>

        <tr>

        <td height="30" align="center">

        <input type="text" name="NO" size="2" value="1" />

        </td>

        <td align="center">

        <input type="text" name="start_end_time" />

        </td>

        <td align="center">

        <input type="text" name="unit_department" />

        </td>

        <td align="center">

        <input type="text" name="post" />

        </td>

        <td>

        <input type="button" id="Button2" onclick="deltr(this)" value="删行" />

        </td>

        </tr>

        </tbody>

        </table>

    </div>

</body>

</html>

基于jQuery表格增加删除代码示例的更多相关文章

  1. jquery表格增加删除后改变序号

    有个小bug,懒得修了. 目的:增加一行的时候,td第一列排序. 删除一行的时候,td第一列排序 <!DOCTYPE HTML> <html> <head> < ...

  2. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  4. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. [IE编程] 多页面基于IE内核浏览器的代码示例

    有不少人发信问这个问题,我把答案贴在这里: 建议参考 WTL (Windows Template Library) 的代码示例工程TabBrowser  (在WTL目录/Samples/TabBrow ...

  6. 基于Redis实现的抢购代码示例

    示例代码是基于博客 https://blog.csdn.net/qq1013598664/article/details/70183908的错误案例修改而来,如果有问题望多多指点,错误代码可以去原文查 ...

  7. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  8. LaTeX 一些用法实例(并列图片、并列表格、算法代码示例、页眉太长、下划线，等)

    横向并列两个图片 \begin{figure} \begin{minipage}{0.49\linewidth} \centering \includegraphics[width=6.5cm]{Si ...

  9. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

随机推荐

  1. JET 调用后端Rest Service

    调用Rest Service可以基于两种方式: 一种是oj.Collection.extend 一种是$.ajax CORS问题 但在调用之前,首先需要解决rest service的CORS问题.(跨 ...

  2. LibreOffice创建数据透视表

    LibreOffice创建数据透视表 LibreOffice: 选中数据,Data->Pivot Table->Create,拖拽行.列到Row和column,Data Filed要点击O ...

  3. Jigsaw 项目：Java 模块系统新手引导

    前言 随着 2017 年 10 月 Java 9 的发布,Java 能够使用模块系统了,但是中文互联网上的资料太少,许多关于 Java 模块系统的文章都只是介绍了模块系统的好处,或者给了一些毫无组织的 ...

  4. git相关知识：如何避免某些文件无需提交

    查看所有命令 git help -a 查看所有概念解释 git help -g 某个命令的具体帮助信息 git help command 如何避免某些文件无需提交? 合作开发时个人的约定的不上传的文件 ...

  5. http://www.binghe.org/2010/03/use-httpsurlconnection-in-java/

    http://www.binghe.org/2010/03/use-httpsurlconnection-in-java/

  6. C# SendMail 发送邮件

    最近因为用的发送邮件的地方,就查询了资料,总结以下几个方法 1.利用新浪邮箱发送 2.利用公司邮箱发送 3.利用CDO发送,这种方式要引用Interop.ADODB.dll(http://www.no ...

  7. 数据结构（Java语言）——BinaryHeap简单实现

    优先队列priority queue是同意至少下列两种操作的数据结构:insert插入以及deleteMin(删除最小者),它的工作是找出,返回并删除优先队列中最小的元素.insert操作等价于enq ...

  8. DirectShow控制台输出和保存视频设备名称

    #include "windows.h" #include "TCHAR.h" #include <dshow.h> #include <ve ...

  9. 使用Eclipse Memory Analyzer分析内存

    1 内存泄漏的排查方法 Dalvik Debug Monitor Server (DDMS) 是 ADT插件的一部分,当中有两项功能可用于内存检查 : ·    heap 查看堆的分配情况 ·     ...

  10. Srping AOP xml方式

      使用aop需要: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="ht ...