javascript - jquery克隆一个没有文本内容的html结构

Question

每一个。请帮助我。

如何克隆没有输入内容的 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);
 });

代码正在运行，但它将与输入内容一起附加

谢谢

Answer 1

如果克隆表是您的模板，您可以在单击之前存储它的副本，这样每个副本就不会存储文本输入。

一个例子:

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