<!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. win8.1无法安装安装.net framework 3.5 解决办法【转】

    安装流程1.以系统管理员开启命令提示符(命令提示字符)2挂载windows8.1异3,在命令提示符下输入Dism /online /enablefeature/featurename:NetFx3 / ...

  2. SQL CTE 递归分割以逗号分隔的字符串

    )) INSERT INTO @t SELECT 'AAA,BBB,CCC' SELECT * FROM @t ;WITH mycte AS ( ,mend,num FROM @t UNION ALL ...

  3. Swift，枚举

    枚举类型判断 1.设置并利用枚举 enum Weacher{ case a case b case c } var d=Weacher.b switch d{ case .a: print(" ...

  4. iOS：实现图片的无限轮播

    为尊重原创,特注明原文链接:http://m.myexception.cn/operating-system/1949043.html 图片轮播及其无限循环效果 平时APP中的广告位或者滚动的新闻图片 ...

  5. Gradle项目学习 & HttpAsyncClient学习 & CountDownLatch学习

    装了Intellij,就是装了Gradle. 新建一个Gradle项目.然后下面这个页面要勾选上面两项: Use auto-import和Create directories for empty co ...

  6. Discuz! 7.1 & 7.2 远程代码执行漏洞

    受影响产品: Discuz! 7.1 & 7.2 漏洞描述: 产生漏洞的$scriptlang数组在安装插件后已经初始化 Discuz!新版本7.1与7.2版本中的showmessage函数中 ...

  7. Kubernetes用户指南（四）--应用检查和调试

    一.调试 当你的应用开始运行,那么DEBUG是不可避免的问题. 早些时候,我们在描述的是如何通过kubectl get pods来获得Pod的简单状态信息. 但是现在,这里有更多的方式来获得关于你的应 ...

  8. RDD编程 下（Spark自学四）

    3.5 常见的转化操作和行动操作 3.5.1 基本RDD 1. 针对各个元素的转化操作 两个最常用的转化操作是map()和filter().转化操作map()接受一个函数,把这个函数用于RDD中的每个 ...

  9. webpacke install vue application 报错 Failed at the phantomjs-prebuilt@2.1.14 install script

    刚刚在网上下了个开源的项目: https://github.com/ing670/webappkiller 执行npm install 报错:npm ERR! Failed at the phanto ...

  10. Centos6.0 通过devtoolset-2工具安装gcc 4.8

    详细步骤: 1.Save repository information as /etc/ yum .repos.d/slc6- devtoolset.repo on your system.then ...