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

这是我的表的样子:

<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

我哪里出错了？

最佳答案

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

无法选择被选中的表，因为渲染的表没有 id 。 这是这段代码 的最大问题。

echo "<td><input type='text' id='roof-component-name' name='roof-component-name[]' value=''</td>"; 在这一行中，输入没有关闭，导致 HTML 格式错误。

在 HTML 生成中，删除链接没有转义引号，从而产生脚本错误。

工作 fiddle :https://jsfiddle.net/dr1g02go/4/

关于javascript - 将空表行附加到表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31927073/