jquery - 当我克隆一个部分时，HTML 格式被破坏

Question

我有一个按钮，单击该按钮将克隆表单的一部分并将其附加。然而，当它被追加时，我的格式/CSS 变得一团糟。

这是我的 HTML

<form enctype="multipart/form-data" method="post" action="newfacility.php">
    <fieldset>
        <legend>New Facility</legend>
        <label for="facilitynumber">Facility Number:</label>
        <input type="text" id="facilitynumber" name="facilitynumber" value=""><br />
        <label for="facilityname">Facility name:</label>
        <input type="text" id="facilityname" name="facilityname" value=""><br />
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" value="" /><br />
            <div id="facility_section_info">
                <fieldset>
                    <legend>Facility Section Information</legend>
                    <label for="designatedroofarea">Designated Roof Area: </label>
                    <input id="designatedroofarea" type="text" name="designatedroofarea"/><br />
                    <div id="roofcomponent">
                        <fieldset>
                            <table id="component_table">
                                <thead>
                                    <tr>
                                        <th>Component</th>
                                        <th>Component Type</th>
                                    </tr>
                                </thead>
                                <tbody id="component_tb">
                                    <tr id="row0">
                                        <td>component name</td>
                                        <td>component type</td> 
                                    </tr>
                                </tbody>
                            </table>
                            <input type="button" value="+" id="addRows" class="addRows"/>
                        </fieldset>
                    </div>
                    <input type="button" value="Add New Section" id="addSection" class="addSection"/>
                </fieldset>
            </div>

        <input type="submit" value="Create" name="submit" />
    </fieldset>
</form>

CSS

html, body
{
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
}

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    vertical-align:middle;
    margin-left:20px;
}

label {
    display:inline-block;
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 200px;
}

table{
    width: 80%;
    background-color: white;
    padding: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

th{
    text-align: center;
    padding: 1px;
}

tr {
    padding: 1px;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

td{
    text-align: center;
    padding: 2px;
}

我的 JQuery 函数可以在这个 JSFiddle 中看到.

我该如何修复它，以便在我克隆和追加一个部分时我的格式不会改变？

Answer 1

您的克隆脚本有缺陷。

var $section = $("#facility_section_info").clone();

你应该克隆里面的东西(第一个 <fieldset> )，然后将它附加到你的包装器中。

请看这个fiddle .