每一个。 请帮助我。
如何克隆没有输入内容的 html 结构(带有表格和输入字段)。
这是我的 html 代码
<div class="clone_wrapp">
<div class="clone_table">
<div class="two_column_table">
<table>
<tr><td>Name of officer-in-charge</td></tr>
<tr><td><input type="text"></td></tr>
<tr><td>Contact No</td></tr>
<tr><td><input type="text"></td></tr>
</table>
</div> <!-- two_column_table -->
<div class="two_column_table">
<table>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
</table>
</div> <!-- two_column_table -->
</div> <!-- clone_table -->
</div> <!-- cloned wrapp -->
<div class="add_more_field">ADD MORE</div>
这是我的 jquery
$('.add_more_field').click(function(){
var cloned_structure= $('.clone_table').clone();
$('.clone_wrapp').append(cloned_structure);
});
代码正在运行,但它将与输入内容一起附加
谢谢
最佳答案
如果克隆表是您的模板,您可以在单击之前存储它的副本,这样每个副本就不会存储文本输入。
一个例子:
var clone_table_html = "
<div class=\"clone_table\">
<div class=\"two_column_table\">
<table>
<tr><td>Name of officer-in-charge</td></tr>
<tr><td><input type=\"text\"></td></tr>
<tr><td>Contact No</td></tr>
<tr><td><input type=\"text\"></td></tr>
</table>
</div> <!-- two_column_table -->
<div class=\"two_column_table\">
<table>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
</table>
</div> <!-- two_column_table -->
</div> <!-- clone_table -->
";
$('.add_more_field').click(function() {
$('.clone_wrapp').append(clone_table_html);
});
或者:
var clone_table_template;
$(document).ready(function() {
clone_table_template = $('.clone_table').clone();
});
$('.add_more_field').click(function() {
$('.clone_wrapp').append(clone_table_template);
});
关于javascript - jquery克隆一个没有文本内容的html结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18417948/