点击+添加新行并保存数据

1.基础表格

<table class="tableTempDetal" border="1" bordercolor="#000000" id="dataTempDatialTable">
                <tr style="background-color: #edf1fa;">
                    <td class="detailsImg">
                        <img src="../../Images/Glyph-Add.png" onclick="AddTemplateDetail()" alt="" /><input
                            type="hidden" id="hisContractResponsible" value="" />
                    </td>
                    <td>
                        模框名称
                    </td>
                    <td>
                        标记ID
                    </td>
                    <td>
                        宽度
                    </td>
                    <td>
                        高度
                    </td>
                    <td>
                        适配说明
                    </td>
                </tr>
                <tr id="0" style="display: none;">
                    <td>
                        <img src="../../Images/delete.png" alt="删除" id="imdDel0" name="imdDel0" onclick="DelTempDetail(this,0)" />
                    </td>
                    <td>
                        <input type="text" class="RectangleName" id="RectangleName" name="RectangleName"
                            maxlength="10" value='' />
                    </td>
                    <td>
                        <input type="text" class="DivID" id="DivID" name="DivID" maxlength="16" value='' />
                    </td>
                    <td>
                        <input type="text" class="Width" id="Width" name="Width" maxlength="3" onkeyup='this.value=this.value.replace(/D/gi,"")'
                            value='' />
                    </td>
                    <td>
                        <input type="text" class="Height" id="Height" name="Height" maxlength="3" onkeyup='this.value=this.value.replace(/D/gi,"")'
                            value='' />
                    </td>
                    <td style=" 100%; text-align: left;">
                        <input type="text" style=" 99%;" class="AdaptRemark" name="AdaptRemark" id="AdaptRemark"
                            maxlength="50" value="" />
                    </td>
                </tr>
                <asp:Repeater runat="server" ID="rptTempDetailsList">
                    <ItemTemplate>
                        <tr id="<%# Container.ItemIndex+1  %>">
                            <td>
                                <img src="../../Images/delete.png" alt="删除" id="imdDel<%# Container.ItemIndex+1  %>"
                                    name="imdDel0" onclick="DelTempDetail(this,<%#Eval("ID") %>)" />
                                <input type="hidden" value="<%#Eval("ID") %>" class="TempDetailID" name="TempDetailID<%# Container.ItemIndex+1  %>"
                                    id="TempDetailID<%# Container.ItemIndex+1  %>" />
                            </td>
                            <td>
                                <input type="text" name="RectangleName<%# Container.ItemIndex+1  %>" id="RectangleName<%# Container.ItemIndex+1  %>"
                                    class="RectangleName" value='<%# Eval("RectangleName") %>' />
                            </td>
                            <td>
                                <input type="text" name="DivID<%# Container.ItemIndex+1  %>" id="DivID<%# Container.ItemIndex+1  %>"
                                    class="DivID" value='<%# Eval("DivID") %>' />
                            </td>
                            <td>
                                <input type="text" name="Width<%# Container.ItemIndex+1  %>" id="Width<%# Container.ItemIndex+1  %>"
                                    class="Width" value='<%# Eval("Width") %>' maxlength="4" onkeyup='this.value=this.value.replace(/D/gi,"")' />
                            </td>
                            <td>
                                <input type="text" name="Height<%# Container.ItemIndex+1  %>" id="Height<%# Container.ItemIndex+1  %>"
                                    class="Height" value='<%# Eval("Height") %>' maxlength="4" onkeyup='this.value=this.value.replace(/D/gi,"")' />
                            </td>
                            <td style=" 100%; text-align: left;">
                                <input type="text" name="AdaptRemark<%# Container.ItemIndex+1  %>" id="AdaptRemark<%# Container.ItemIndex+1  %>"
                                    class="AdaptRemark" value='<%# Eval("AdaptRemark") %>' style=" 99%;" />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>

2.+新行

//新增模框
        function AddTemplateDetail() {
            //在table中添加一行数据行，参数为所在table的id，每个数据行必须为tr命名id=行号，表头行和统计行不需要
            //页面中必须引入jquery.js
            var tableId = "dataTempDatialTable";
            var trNewIndex = 0;
            var trLast = $("#" + tableId).find("tr[id]:last");
            trNewIndex = parseInt(trLast.attr("id")) + 1;
            var trNew = trLast.clone();
            trNew.attr("id", trNewIndex); //行号
            trNew.find("span:first").text(trNewIndex); //序号赋值
            trNew.find("td").each(function () {
                $(this).children("[type!='button']").each(function () {
                    $(this).attr("id", $(this).attr("id").replace(trNewIndex - 1, trNewIndex));
                    $(this).attr("name", $(this).attr("id"));
                    $(this).val("");
                });
            });
            trNew.show();
            trLast.after(trNew);

            TempDetailCount();
        }

3.X删除行

//删除模框行
        function DelTempDetail(obj, id) {
            var trs = $(obj).parent("td").parent("tr");
            $(trs).remove();
        }

4.隐藏域 保存多行值

//设置模框行中，对应input的ID和name
        function setTempDetailValue() {
            var ids = new Array();
            var result = "";
            $("#dataTempDatialTable tr:gt(1)").each(function (index) {
                $(this).find(".TempDetailID").attr("ID", "TempDetailID" + (index + 1)).attr("name", "TempDetailID" + (index + 1));
                $(this).find(".RectangleName").attr("ID", "RectangleName" + (index + 1)).attr("name", "RectangleName" + (index + 1));
                $(this).find(".DivID").attr("ID", "DivID" + (index + 1)).attr("name", "DivID" + (index + 1));
                $(this).find(".Width").attr("ID", "Width" + (index + 1)).attr("name", "Width" + (index + 1));
                $(this).find(".Height").attr("ID", "Height" + (index + 1)).attr("name", "Height" + (index + 1));
                $(this).find(".AdaptRemark").attr("ID", "AdaptRemark" + (index + 1)).attr("name", "AdaptRemark" + (index + 1));
                ids.push(parseInt($(this).find("input[type='hidden']").val()));
            });
            result = ids.join(",");
            $("#hidTempDatailTable").val(result);
        }

5.后台取值

#region 模板明细表（模框）
                T_COM_TemplateDetail tempDetail = null;
                for (int i = 1; i <= tempDetailLength; i++)
                {
                    if (uid == 0)
                        tempDetail = new T_COM_TemplateDetail();
                    else
                        tempDetail = T_COM_TemplateDetailBll.Instance.GetModel(Convert.ToInt32(Request.Form["TempDetailID" + i].Trim()));

                    tempDetail.RectangleName = Request.Form["RectangleName" + i].Trim();
                    tempDetail.DivID = Request.Form["DivID" + i].Trim();
                    tempDetail.Width = Convert.ToInt32(Request.Form["Width" + i].Trim());
                    tempDetail.Height = Convert.ToInt32(Request.Form["Height" + i].Trim());
                    tempDetail.AdaptRemark = Request.Form["AdaptRemark" + i].Trim();
                    tempDetail.IsDelete = false;

                    if (uid == 0)
                    {
                        tempDetail.TempID = T_COM_TemplateDetailBll.Instance.MaxTemplateId();
                        tempDetail.CreateBy = CurrentUser.UserName;
                        tempDetail.CreateTime = DateTime.Now;
                        T_COM_TemplateDetailBll.Instance.Add(tempDetail);
                    }
                    else
                    {
                        tempDetail.TempID = temp.ID;
                        tempDetail.CreateBy = temp.CreateBy;
                        tempDetail.CreateTime = temp.CreateTime;
                        tempDetail.UpdateBy = CurrentUser.UserName;
                        tempDetail.UpdateTime = DateTime.Now;
                        T_COM_TemplateDetailBll.Instance.Update(tempDetail);
                    }
                }

                #endregion