<!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. Swift，下标简化方法的调用

    在类(class)当中采用subscript的方法直接用下标 class a{ func b(number:Int)->Int{ return number } subscript(number ...

  2. java获取桌面路径的方法

    FileSystemView fsv = FileSystemView.getFileSystemView(); File com=fsv.getHomeDirectory(); System.out ...

  3. observer pattern 之我见

    所谓模式,更多的是一种想法,完全没必要拘泥于代码细节.观察者模式更多体现了两个独立的类利用接口完成一件本应该很复杂的事情 --------------------------------------- ...

  4. 集成方法：渐进梯度回归树GBRT（迭代决策树）

    http://blog.csdn.net/pipisorry/article/details/60776803 单决策树C4.5由于功能太简单.而且非常easy出现过拟合的现象.于是引申出了很多变种决 ...

  5. css - 公众号样式

    /* * @Author: WJ_LONG * @Date: 2018-09-06 15:32:06 * @Last Modified by: WJ_LONG * @Last Modified tim ...

  6. ubuntu14.04 配置tomcat8

    ubuntu下配置tomcat的过程事实上和windows是差点儿相同的,以下一起来看一下怎样在ubuntu14.04中配置tomcat. 1.下载tomcat 地址:http://tomcat.ap ...

  7. 悟道—位IT高管20年的职场心经（读书笔记三）

    悟道--一位IT高管20年的职场心经 第三章 世事洞明皆学问 职场就是你的大半个世界 是你一辈子也读不完的一大本书 想明确一个道理. 看明确一件事儿, 你就向成功迈进了一步. 1.1  "四 ...

  8. Axure RP Extension for Chrome

    1.打开Chrome浏览器,找到“更多工具 -> 扩展程序”: 2.将下载的Axure-RP-Extension-for-Chrome-0.6.2.crx文件拖到界面当中: 3.安装成功后,勾选 ...

  9. js比较数字相等

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  10. Android-RelativeLayout布局技巧(一)

    如果有一个需求是这样的,在标题中的右上角有一个button <?xml version="1.0" encoding="utf-8"?> <L ...