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

你需要尝试

$('.add_more_field').click(function(){
    var cloned_structure= $('.clone_table').clone();
    cloned_structure.removeClass('clone_table').find('input:text').val('')
    $('.clone_wrapp').append(cloned_structure);
});

Answer 2

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

一个例子：

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

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

2 个答案: