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，它应克隆我的空行并将其附加到表的末尾。

以下是我试图这样做的方法：

$(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/

Answer 2

这个功能可以正常工作我猜，这里只有三个问题：

无法选择所选表，因为呈现的表没有id。 这是此代码的最大问题。
echo "<td><input type='text' id='roof-component-name' name='roof-component-name[]' value=''</td>";在此行中，输入未关闭，导致HTML格式错误。
在HTML生成中，删除链接没有转义引号，导致脚本错误。

工作小提琴：https://jsfiddle.net/dr1g02go/4/

将空表行附加到表中

2 个答案: