Javascript 将空表行追加到表中

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

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">                            

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

---

我在这里哪里出错了？

我想这个函数可以正常工作，这里只有三个问题：

无法选择所选的表，因为呈现的表没有

id

这是此代码的最大问题

---

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

添加

请您发布呈现的html，而不是发布php。小提琴会很有用too@andrew现在只有html，并添加了一个fiddle。1.我完全像这样克隆了另一个表的第一行，没有问题？2.我在克隆函数中添加了
true
参数。3.我在这里固定了右括号。deep克隆与包含子项无关。第2项为incorrect@charlietfl，您是对的，将其与
元素.prototype.clone混用，默认情况下，后者不会产生深度复制。@Mouser使其全部工作正常，还感谢其他修复程序-帮了我不少忙！：）
<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">

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