javascript - 将空表行附加到表

Question

当用户选择某些内容时，我会输出一个表格。我有一个按钮，允许用户将一个空表行附加到表的末尾，但我似乎无法让它正常工作。

PHP 中的 HTML 生成代码:

echo<table>
   "<table id='roof-component-data-table'><tbody>
        <tr>
            <th>Roof Component</th>
            <th>Delete</th>
        </tr>";tr>
        <tr id="roofComponentRow" style="display: none;">
        //empty row used to clone<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
        echo</tr>
 "<tr id='roofComponentRow' style='display: none;'>";    <tr id="roofComponentRow0">
        echo "<td><input type='text' id='roof <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value=''<value="Air Film" <="" td=""></td>";td>
        echo "<   <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")">Delete</tr>";a></td>
        </tr>
        while<tr ($roofComponentsRowid="roofComponentRow1">
 = mysqli_fetch_array($roofComponentsData)) {         <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
            echo<td><a "<trhref="#" id='roofComponentRow".class="removeRoofComponentRow" $ComponentRowCounteronclick="removeRoofComponent("Surfacing")">Delete</a></td>
 ."'>";       </tr>
        <tr id="roofComponentRow2">
    echo "<td><input type='text' id='roof     <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value='".value="Membranes" $roofComponentsRow['roof_component_name']<="" ."'<td=""></td>";td>
            echo "<td><a<td><a href='#'href="#" class='removeRoofComponentRow'class="removeRoofComponentRow" onClick='removeRoofComponentonclick="removeRoofComponent(\"{$roofComponentsRow['roof_component_name']}\""Membranes")'>Delete<">Delete</a></td>";td>
        </tr>
        echo<tr "<id="roofComponentRow3">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></tr>";td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")">Delete</a></td>
        </tr>
    $ComponentRowCounter++;    <tr id="roofComponentRow4">
        }    <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
echo "<           <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")">Delete</table>";a></td>
        </tr>
echo"<input type='button' value='+' id='addRoofComponentRow' class='addRoofComponentRow'</>";tbody>
</table>

<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">                            

这是我的表格的样子:

<table>
    <tbody>
        <tr>
            <th>Roof Component</th>
            <th>Delete</th>
        </tr>
        <tr id="roofComponentRow" style="display: none;">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
        </tr>
        <tr id="roofComponentRow0">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Air Film" <="" td=""></td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")">Delete</a></td>
        </tr>
        <tr id="roofComponentRow1">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Surfacing")">Delete</a></td>
        </tr>
        <tr id="roofComponentRow2">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Membranes" <="" td=""></td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Membranes")">Delete</a></td>
        </tr>
        <tr id="roofComponentRow3">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")">Delete</a></td>
        </tr>
        <tr id="roofComponentRow4">
            <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
            <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")">Delete</a></td>
        </tr>
    </tbody>
</table>

<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">

现在，当用户单击 + 按钮时，它将触发一些 JS，该 JS 应该克隆我的空行并将其附加到表的末尾。

这是我尝试这样做的方式:

$(function() {

    var $removeIDValue = 0;

    $(document.body).on('click', '.addRoofComponentRow', function () {

        var $emptyRoofComponentRow = $("#roofComponentRow").clone();
        $removeIDValue++

        var $emptyRoofComponentRowClone = $emptyRoofComponentRow.clone();
        var $newRowID = 'added_roof_component_row' + $removeIDValue;
        $emptyRoofComponentRowClone.attr('id', $newRowID)
        $emptyRoofComponentRowClone.children('td').last().after('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Delete</a></td>');

        $('#roof-component-data-table').append($emptyRoofComponentRowClone);
        $emptyRoofComponentRowClone.show();
    });
});

当我点击按钮时，什么也没有发生，我没有看到任何东西被添加到表格中，我也没有收到任何控制台错误。我还使用该函数设置了一个警报，以查看该函数是否触发以及是否显示了我的警报消息。

JSFiddle

我哪里出错了？

Answer 1

你没有把它附加到任何东西上

添加<tbody id="roof-component-data-table">

https://jsfiddle.net/dr1g02go/5/