基于jQuery表格增加删除代码示例

时间：2021-10-10 10:46:51
<!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> &lt ...

  2. 基于jQuery&plus;HTML5加入购物车代码

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

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

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

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

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

  5. &lbrack;IE编程&rsqb; 多页面基于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 一些用法实例&lpar;并列图片、并列表格、算法代码示例、页眉太长、下划线，等&rpar;

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

  9. JQuery动态增加删除元素

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

随机推荐

  1. Leetcode Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  2. java BigDecimal add 等方法遇到的问题

    //这篇随笔是为了提醒自己避免重复错误 //原先的代码是这样的,想着输出会是9.00,可是结果却是0.00 BigDecimal day_fee = new BigDecimal("0.00 ...

  3. Ubuntu 16&period;10下的eclipse

    下载后解压,放到文件下,打开此文件左边齿轮状的东西,即可指引安装:

  4. Sigmaplot激活码获取地址

    SigmaPlot是一款高质量绘图软件,可以帮助用户以超简单表格形式来更清楚有效地展现工作结果,有了SigmaPlot你可以不用在电脑前久坐就可以制作出高质量的图形. 软件完美兼容Microsoft ...

  5. 将普通工程转为mvn标准工程（main resources&rpar;

    It is sometimes required to change the default source folder working on the java project. One best e ...

  6. python 读取全国城市aqi数据，差值生成png图片

    # -*- coding: utf-8 -*- import arcpy import sys import datetime import cx_Oracle import json import ...

  7. 鸟哥笔记：linux系统日志文件介绍

    简单的说日志文件就是记录系统活动信息的几个文件,例如:何时.何地(来源ip).何人(什么服务名称).做了什么操作.换句话说就是:记录系统在什么时候由哪个进程做了什么样的行为时,发生了什么事件等. 日志 ...

  8. cPickle&period;so&colon;&colon; PyUnicodeUCS2&lowbar;DecodeUTF8

    cPickle.so:: PyUnicodeUCS2_DecodeUTF8错误 Python编译的参数,和Python module(mod_wsgi, pymodwsgi)编译参数不一,导致一些un ...

  9. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  10. Android 瘦身之道 ---- so文件

    Android 瘦身之道 ---- so文件 [TOC] 1. 前言 目前Android 瘦身只有几个方面可以入手,因为apk的结构就已经固定了. res 目录下的资源文件.(通常是压缩图片,比如 矢 ...

相关文章