Javascript 如何在ASP.Net中单击按钮创建动态表_Javascript_Asp.net

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

javascript asp.net

Javascript 如何在ASP.Net中单击按钮创建动态表,javascript,asp.net,Javascript,Asp.net,我有一张桌子如下 <table id="Table" runat="server"> <tr> <td>Title <span class="astrix">*</span> </td> <td> <asp:DropDownList name="dd

我有一张桌子如下

<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>

但是无法执行所需的操作。

您可以这样做。创建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）

您可以这样做。创建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）

试试这个

function duplicate() {
    var tbl= document.getElementById('Table');
    var html="<table id='duplic"+document.getElementById('service').getElementsByTagName('table').length+1+"'>"+tbl.innerHTML+"</table>";
    document.getElementById('service').innerHTML=document.getElementById('service').innerHTML+html;
    return false;
}

函数复制（）{
var tbl=document.getElementById（'Table'）；
var html=“”+tbl.innerHTML+”；
document.getElementById（'service'）.innerHTML=document.getElementById（'service'）.innerHTML+html；
返回false；
}

试试这个

function duplicate() {
    var tbl= document.getElementById('Table');
    var html="<table id='duplic"+document.getElementById('service').getElementsByTagName('table').length+1+"'>"+tbl.innerHTML+"</table>";
    document.getElementById('service').innerHTML=document.getElementById('service').innerHTML+html;
    return false;
}

函数复制（）{
var tbl=document.getElementById（'Table'）；
var html=“”+tbl.innerHTML+”；
document.getElementById（'service'）.innerHTML=document.getElementById（'service'）.innerHTML+html；
返回false；
}

我是否可以对n个表格重复该操作，而不是2个表格？是，为此，您必须通过代码动态添加表，并获取该表的id作为目标。这里的问题是

id

两个

表的内容的id
是相同的，因为我需要不同的id
，以便以后我可以从中获取值，您可以在创建表之前将id作为随机字符串生成并分配它之后。你能详细说明一下怎么做吗？这将是非常有用的，而不是2个表格，我可以重复n个表格吗？是的，为此，您必须通过代码动态添加表，并获取该表的id作为目标。这里的问题是id
两个表的内容的id
是相同的，因为我需要不同的id
，以便以后我可以从中获取值，您可以在创建表之前将id作为随机字符串生成并分配它之后。你能详细说明一下怎么做吗？这将非常有帮助