<!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. ajax asynx:false

    默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行 (默认: true) 默认设置下,所有请求均为 ...

  2. Linux FTP配置

    Linux下实现ftp的软件有很多,最常见的有vsftpd,Wu-ftpd和proftp等.访问ftp服务器时需要验证,只有经过了ftp服务器的验证用户才能访问和传输文件.这里我们用vsftpd,vs ...

  3. centos7 安装nginx与配置

    第一步安装 使用Yum安装是推荐的方式,整体的流程非常的简单,也不容易出错,如果不需要什么特殊配置,建议使用Yum尽进行安装. 第一种安装方式,通过添加epel源 yum install epel-r ...

  4. 【转】python中文转换url编码

    今天要处理百度贴吧的东西.想要做一个关键词的list,每次需要时,直接添加 到list里面就可以了.但是添加到list里面是中文的情况(比如‘丽江’),url的地址编码却是'%E4%B8%BD%E6% ...

  5. Spark Streaming揭秘 Day2-五大核心特征

    Spark Streaming揭秘 Day2 五大核心特征 引子 书接上回,Streaming更像Spark上的一个应用程序,会有多个Job的配合,是最复杂的Spark应用程序.让我们先从特征角度进行 ...

  6. docker实战——在测试中使用Docker

    在之前几章中介绍的都是Docker的基础知识,了解什么是镜像,docker基本的启动流程,以及如何去运作一个容器等等. 接下来的几个章节将介绍如何在实际开发和测试过程中使用docker. 将Docke ...

  7. hibernate学习系列-----（9）hibernate对集合属性的操作之Map集合篇

    照旧,先新建一个StudentMap.java实体类,将hobby属性使用map集合接口来存放: package com.joe.entity; import java.util.Map; publi ...

  8. CentOS系统使用yum安装配置MariaDB数据库

    http://www.server110.com/mariadb/201310/2670.html 1.在 /etc/yum.repos.d/ 下建立 MariaDB.repo,内容如下:[azure ...

  9. 自定义通用dialogFragment

    代码地址如下:http://www.demodashi.com/demo/12844.html 前言 之前写过一篇dialogFragmnet封装默认dialog的文章 DialogFragment创 ...

  10. iBatis in或not in 查询

    iBatis in或not in 查询 open:内容开头 close:内容结尾 conjunction:分隔符   <isNotNull prepend="and" pro ...