javascript - 如何在 ASP.Net 中单击按钮创建动态表

Question

我有一个表格如下

<table id="Table" runat="server">
            <tr>
                <td>Title <span class="astrix">*</span>
                </td>
                <td>
                    <asp:DropDownList name="ddltitle" ID="ddlDirectorsDetalTitle" runat="server">
                        <asp:ListItem Value="Mr">Mr</asp:ListItem>
                        <asp:ListItem Value="Mrs">Mrs</asp:ListItem>
                        <asp:ListItem Value="Ms">Ms</asp:ListItem>
                        <asp:ListItem Value="Miss">Miss</asp:ListItem>
                        <asp:ListItem Value="Dr">Dr</asp:ListItem>
                        <asp:ListItem Value="Prof">Prof</asp:ListItem>
                        <asp:ListItem Value="Adml">Adml</asp:ListItem>
                        <asp:ListItem Value="Att">Att</asp:ListItem>
                        <asp:ListItem Value="Brig">Brig</asp:ListItem>
                        <asp:ListItem Value="Brn">Brn</asp:ListItem>
                        <asp:ListItem Value="Bshp">Bshp</asp:ListItem>
                        <asp:ListItem Value="Capt">Capt</asp:ListItem>
                        <asp:ListItem Value="Cmdr">Cmdr</asp:ListItem>
                        <asp:ListItem Value="Clr">Clr</asp:ListItem>
                        <asp:ListItem Value="Col">Col</asp:ListItem>
                        <asp:ListItem Value="Comm">Comm</asp:ListItem>
                        <asp:ListItem Value="Cpl">Cpl</asp:ListItem>
                        <asp:ListItem Value="Dame">Dame</asp:ListItem>
                        <asp:ListItem Value="Est">Est</asp:ListItem>
                        <asp:ListItem Value="Flt">Flt</asp:ListItem>
                        <asp:ListItem Value="Fr">Fr</asp:ListItem>
                        <asp:ListItem Value="GCpt">GCpt</asp:ListItem>
                        <asp:ListItem Value="Hon">Hon</asp:ListItem>
                        <asp:ListItem Value="Jdg">Jdg</asp:ListItem>
                        <asp:ListItem Value="Lady">Lady</asp:ListItem>
                        <asp:ListItem Value="Lt">Lt</asp:ListItem>
                        <asp:ListItem Value="LtCl">LtCl</asp:ListItem>
                        <asp:ListItem Value="Maj">Maj</asp:ListItem>
                        <asp:ListItem Value="Mdm">Mdm</asp:ListItem>
                        <asp:ListItem Value="Msrs">Msrs</asp:ListItem>
                        <asp:ListItem Value="Mstr">Mstr</asp:ListItem>
                        <asp:ListItem Value="Pstr">Pstr</asp:ListItem>
                        <asp:ListItem Value="Rab">Rab</asp:ListItem>
                        <asp:ListItem Value="Rev">Rev</asp:ListItem>
                        <asp:ListItem Value="Sen">Sen</asp:ListItem>
                        <asp:ListItem Value="Sgt">Sgt</asp:ListItem>
                        <asp:ListItem Value="Sir">Sir</asp:ListItem>
                        <asp:ListItem Value="Sr">Sr</asp:ListItem>
                        <asp:ListItem Value="WCmd">WCmd</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>Name <span class="astrix">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtDirectorsDetailsFirstName" runat="server" placeholder="First Name"></asp:TextBox>
                    <asp:TextBox ID="txtDirectorsDetailsLastName" runat="server" placeholder="Last Name"></asp:TextBox><br />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator28" runat="server" ControlToValidate="txtDirectorsDetailsFirstName" ErrorMessage="Required!" ForeColor="Red" ValidationGroup="TabDirectorsDetails" SetFocusOnError="True" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator29" runat="server" ErrorMessage="Required!" ForeColor="Red" ControlToValidate="txtDirectorsDetailsLastName" ValidationGroup="TabDirectorsDetails" SetFocusOnError="True" />
                </td>
            </tr>
            <tr>
                <td>Authorised signatory on the account <span class="astrix">*</span>
                </td>
                <td>
                    <asp:RadioButtonList ID="RadioAuthorisedSignatory" runat="server" RepeatDirection="Vertical">
                        <asp:ListItem Selected="True">Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td>Role in Company <span class="astrix">*</span>
                </td>
                <td>
                    <asp:DropDownList name="ddlRole" ID="ddlRole" runat="server" AutoPostBack="true">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Director</asp:ListItem>
                        <asp:ListItem Value="2">Sole Director & Company Secretary</asp:ListItem>
                        <asp:ListItem Value="3">Company Secretary</asp:ListItem>
                        <asp:ListItem Value="4">Other</asp:ListItem>
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator30" runat="server" ErrorMessage="Required!" ForeColor="Red" ControlToValidate="ddlRole" InitialValue="0" ValidationGroup="TabDirectorsDetails" SetFocusOnError="True" />

                </td>
            </tr>
            <tr runat="server" id="trOtherRole">
                <td></td>
                <td>
                    <asp:TextBox ID="txtOtherRole" runat="server" placeholder="Others"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator31" runat="server" ErrorMessage="Required!" ForeColor="Red" ControlToValidate="txtOtherRole" ValidationGroup="TabDirectorsDetails" SetFocusOnError="True" />

                </td>
            </tr>
        </table>

在按钮上单击“我想再次创建相同的表”。我该怎么做，有人可以帮忙吗？ 我尝试使用以下 javascript 克隆其中存在 table 的整个 div

<script>
    function duplicate() {
        var original = document.getElementById('service');
        var rows = original.parentNode.rows;
        var i = rows.length - 1;
        var clone = original.cloneNode(true); // "deep" clone
        clone.id = "duplic" + (i); // there can only be one element with an ID
        original.parentNode.insertBefore(clone, rows[i]);
        return false;
    }
</script>

但无法做需要的事情。

Answer 1

您可以这样做。创建 ID 为“SecondTable”的空表。

function duplicate(){
var source = document.getElementById('Table');
var destination = document.getElementById('SecondTable');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'SecondTable');
destination.parentNode.replaceChild(copy, destination);
}

更新

使用以下方法动态创建表，可以创建N个表。

var table = document.createElement("TABLE");

更新2

(这样您就可以生成随机且唯一的 ID)

var table = document.createElement("TABLE");
table.id = "table_" + new Date().getTime().toString();