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

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

不允许的方法（强行加难度？）：不允许修改已有控件的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控件实现版】