javascript - 使用文本框和按钮动态克隆 div

Question

当用户单击添加/删除按钮时，我正在尝试动态创建以下块。

<div id="divExtra" runat="server" style="margin-bottom: 5px;" >
                <b>Extra</b>
                <div style="border-style: solid; border-width: 1px; padding: 3px;">
                    Color:<asp:TextBox runat="server" ID="txtExtra_Color" Width="70px"></asp:TextBox>
                    Font Size:<asp:TextBox runat="server" ID="txtExtra_FontSize" Width="70px"></asp:TextBox>
                    Family:<asp:TextBox runat="server" ID="txtExtra_FontFamily" Width="70px"></asp:TextBox>
                    X:<asp:TextBox runat="server" ID="txtExtra_X" Width="70px"></asp:TextBox>
                    Y:<asp:TextBox runat="server" ID="txtExtra_Y" Width="70px"></asp:TextBox>
                    Field :
                    <asp:DropDownList ID="cboExtraField" runat="server"></asp:DropDownList>
                    <asp:CheckBox runat="server" ID="chkExtraBackside" Text="Is Back Side" />
                    <asp:CheckBox runat="server" ID="chkExtraisImage" Text="Is Image" />
                </div>
</div>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

他们可以多次创建此项目。所以最后我将把这些值保存到数据库中。所以我可以通过以下代码创建我需要的块。

    for (int i = 1; i < count; i++)
    {
        HtmlGenericControl myDiv = new HtmlGenericControl("div");
        myDiv.ID = "myDiv" + i;
        myDiv.InnerHtml = "<div id=\"divExtra" + i + "\" runat=\"server\" style=\"margin-bottom: 5px;\" visible=\"false\"><b>" + ddlTay.SelectedItem.Text + "</b><div style=\"border-style: solid; border-width: 1px; padding: 3px;\">Color:<input type=\"text\" runat=\"server\" ID=\"txtExtra" + i + "_Color\"  Width=\"70px\"/>Font Size:<input type=\"text\" runat=\"server\" ID=\"txtExtra1_FontSize\"  Width=\"70px\"/>Family:<input type=\"text\" runat=\"server\" ID=\"txtExtra" + i + "_FontFamily\"  Width=\"70px\"/>X:<input type=\"text\" runat=\"server\" ID=\"txtExtra" + i + "_X\"  Width=\"70px\"/>Y:<input type=\"text\" runat=\"server\" ID=\"txtExtra" + i + "_Y\"  Width=\"70px\"/>Is Back Side<input type=\"checkbox\" runat=\"server\" ID=\"chkExtra" + i + "Backside\" />Is Image<input type=\"checkbox\" runat=\"server\" ID=\"chkExtra" + i + "isImage\" /></div></div>";
        PlaceHolder1.Controls.Add(myDiv);
    }

问题是我想将这些值保存到我的数据库中，并且在加载页面时，根据保存的值计数创建相同的结构。

有人可以帮我写代码吗？

感谢你的帮助！

标签： javascriptc#asp.net