我如何創建按鈕點擊動態表在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

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

，但不能做要緊克隆整個div其中table exist。

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); 
} 

UPDATE

創建表動態地跟隨，你可以創建表的N個。

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

更新2

（這樣你就可以生成隨機的和唯一ID）

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

Answer 2

試試這個....

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