我有一张表如下
<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" />
 
<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
克隆div
中table exist
的整个<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>
cString
但无法做到需要。
答案 0 :(得分:0)
你可以这样做。用id&#39; SecondTable
&#39;创建空表。
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();
答案 1 :(得分:0)
试试这个......
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;
}