【代码笔记】动态添加删除带标题的表单控件【HTML为基础 jQuery实现版】

蔚落 2022-10-02 12:00 33阅读 0赞

### 动态添加删除带标题的表单控件 【HTML为基础 jQuery实现版】 ###

*   *  HTML
     *  JavaScript

主要实现的功能性：带标题编号、随意添加删除且保留住留存的表单信息内容、删除时编号不会空缺

不允许的方法（强行加难度？）：不允许修改已有控件的ID、不允许从一个表单往另一个表单搬运数据的操作（可能一个table里控件很多，搬运低效率）

## HTML ##

<table id="Table_1" cellpadding="0" cellspacing="0" style="margin: 0px auto;">
                    <tr>
                        <td>
                            <span ID="Titiel_1" >表单1</span>
                        </td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>
                        	<input type="text" id="txtName_1" />
                        </td>
                        <td>手机号</td>
                        <td>
                        	<input type="text" id="txtMobile_1" />
                        </td>
                        <td>身份证号</td>
                        <td>
                        	<input type="text" id="txtIdNo_1" />
                        </td>
                    </tr>
                </table>
                <div class="MoreTable"></div>
                
                <div style="width: 1200px; text-align: center; margin: 10px 0;" class="btn">
                    <input id="btnAddTable" type="button" value="添加表单" onclick="AddTable()" />
                </div>
    
    <input id="tableCount" type="text" value="1" style="display: none;" />

## JavaScript ##

var MaxTableCount = 5; //最大允许的表单数
    var IdNumIndex = 0; //控件数字后缀
       //添加表单
       function AddTable() { 
           var tableCount = $("#tableCount").val();
           if (tableCount == MaxTableCount)
           { 
               alert("最多只能录入" + MaxTableCount+ "个表单！");
               return false;
           }
           //当前表单数量+1
           $("#tableCount ").val(parseInt(tableCount ) + 1);
           //每次添加都是新的数字后缀 以保证实现 删除后保留住留存的表单信息内容
           IdNumIndex++;
           //增量后的控件ID数字后缀 新添加的表单标题索引一定是添加后表单数量
           AddTableContent(IdNumIndex,$("#tableCount ").val());
       }
    
       function DelTable(idNum) { 
       	   //根据要被删除的表单ID的数字后缀找到标题的数字后缀
           var TitleNum = $("#Title_" + idNum).text().substr("表单".length);
    	   //删除这个表单
           $("#Table_" + idNum).remove();
           //当前表单数量 -1
           $("#tableCount ").val(parseInt($("#tableCount ").val()) - 1);
           
           var anotherIdNum = "";
           //模糊查询所有的表单 *条件视具体情况而定 此处用Table的“Table_”也可以 遍历
           $("span:contains('表单')").each(function(n,obj){ 
               //不动第一个
               if ($(obj).text() != '表单1')
               { 
                   var indexof = "Title_".length;
                   var objId = $(obj).attr("id");
                   anotherIdNum = objId.substr(indexof);
                   //取得控件ID数字后缀
                   if (anotherIdNum != "")
                   { 
                   	   //根据控件ID数字后缀得到标题数字后缀
                       var anotherTitleNum = $("#Title_" + anotherIdNum).text().substr("表单".length);
                       //如果是从中间删的话 比要删的大的标题索引要降一位 而table内控件ID不变 即实现需求且不搬运数据不改变ID
                       if (anotherTitleNum > TitleNum)
                       { 
                           //标题索引降一位
                           anotherTitleNum--;
                           $("#Title_" + anotherIdNum).text("表单" + anotherTitleNum);
                       }
                   }
               }
           });
       }
    
    function AddTableContent(idNum, TitleNum) { 
    	//添加的表单有删除按钮 默认的第一个没有；点击哪个【删除】就删除哪个表单
        var table = "<table id=\"Table_"+idNum+"\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin: 0px auto;\"><tr><td><span ID=\"Titiel_1\" >表单"+TitleNum+"</span><span style=\"float:right;\"><input type=\"button\" value=\"删除\" οnclick=\"DelTable('" + idNum + "')\"></span></td></tr><tr><td>姓名</td><td><input type=\"text\" id=\"txtName_"+idNum+"\" /></td><td>手机号</td><td><input type=\"text\" id=\"txtMobile_"+idNum+"\" /></td><td>身份证号</td><td><input type=\"text\" id=\"txtIdNo_"+idNum+"\" /></td></tr></table>"; 
        //添加到指定位置
        $(".MoreTable").append(table);
    }

*旨在提供思考起点，实际需求往往以此为基础再附加一些要求*

[【代码笔记】动态添加删除带标题的表单控件【ASPX为基础.Net控件实现版】][ASPX_.Net]

[ASPX_.Net]: https://blog.csdn.net/u014294325/article/details/92798893

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 动态新增、删除表单代码，以及对应的flask代码

jQuery 动态新增表单的代码可以使用 jQuery 的 append 方法：$("\form\_container").append(form\_html); 动态删除表单

傷城~/ 2024年03月25日 12:59/ 0 赞/ 38 阅读

相关 (Jquery功能篇) JqGrid表单控件实例代码

截图效果展示： ![Center][] 源代码： <%@ page language="java" contentType="text/html; charset

港控/mmm°/ 2023年10月18日 23:44/ 0 赞/ 144 阅读

相关 jq实现html分页代码,jquery 分页控件实现代码

jquery分页控件 var pageindex=1; var totelsize=60; var centersize=5; var pagesize=0; var

爱被打了一巴掌/ 2022年10月06日 13:51/ 0 赞/ 273 阅读

相关 angularjs自动生成html,Angularjs 实现动态添加控件功能

实现下面这样的需求：点击增加一块数据盘，会出现数据盘选项。 (1)最开始，想到原生JavaScript，jQuery (appendChild()等方法结合Angular

╰半夏微凉°/ 2022年10月06日 09:47/ 0 赞/ 217 阅读

相关【代码笔记】动态添加删除带标题的表单控件【ASPX为基础.Net控件实现版】

动态添加删除带标题的表单控件【ASPX为基础 .Net控件实现版】 ASPX ASPX.CS ASPX <asp:Repeat

喜欢ヅ旅行/ 2022年10月02日 12:00/ 0 赞/ 28 阅读

相关【代码笔记】动态添加删除带标题的表单控件【HTML为基础 jQuery实现版】

动态添加删除带标题的表单控件【HTML为基础 jQuery实现版】 HTML JavaScript 主要实现的功能性：带标题编号、随意添加删

蔚落/ 2022年10月02日 12:00/ 0 赞/ 34 阅读

相关动态的添加、删除表单

在写简历时，有一项实习经历，如果没有就不填，如果有就实习经历，有多少写多少。这个功能是如何实现的，其实很简单，以bootstrap和jquery为例： ![这里写图片描

女爷i/ 2022年06月17日 01:27/ 0 赞/ 273 阅读

相关 html页面动态添加控件

<html> <head> <title>test</title> <script src="http://code.jquery.com/jquery-2.1.1

怼烎@/ 2022年06月14日 03:28/ 0 赞/ 368 阅读

相关控制控件的属性：动态添加控件，删除/隐藏控件

using System; using System.Collections.Generic; using System.ComponentModel;

喜欢ヅ旅行/ 2022年01月14日 06:43/ 0 赞/ 394 阅读

相关 HTML表单的输入控件

HTML表单的输入控件主要有以下几种：文本框，对应的 `<input type="text">`，用于输入文本；口令框，对应的`<input type="passwor

Dear 丶/ 2021年07月26日 20:59/ 0 赞/ 581 阅读