Question

我正在尝试克隆并在用户选择我的添加行按钮时追加表格行。我有一个用于克隆的空隐藏行。我似乎无法让它工作，我也需要它。

我用PHP输出我的表单，看起来像这样：

$budgetRowCount = 0;

echo"<table id='selected_budget_table'>
        <tr>
        <th>Roofs</th>
        <th>Roof Area</th>
        <th>Recommendations</th>
        <th>Amount</th>
        <th>Remove</th>
        </tr>";

echo   "<tr id='new_budget_row0' style='display: none;'>
        <td><input id='budget-roofs' name='budget-roofs[]' /></td>
        <td><input id='budget-area' name='budget-area[]' /></td>
        <td><input id='budget-recommendation' name='budget-recommendations[]' /></td>
        <td><input id='budget-amount' name='budget-amount[]'/> </td>
    </tr>";


while ($budgetInfoRow = mysqli_fetch_array($budgetResult)) {

if($budgetRowCount == 0){
    echo "<tr id='selected_budget_row". $budgetRowCount ."'>";
    echo "<td><input type='text' id='budget-roofs' name='budget-roofs[]' value='".$budgetInfoRow['budget_roofs']."'</td>";
    echo "<td><input type='text' id='budget-roof-area' name='budget-roof-area[]' value='".$budgetInfoRow['budget_roof_area']."'</td>";
    echo "<td><input type='text' id='budget-recommendation' name='budget-recommendation[]' value='".$budgetInfoRow['budget_recommendation']."'</td>";
    echo "<td><input type='text' id='budget-amount' name='budget-amount[]' value='".$budgetInfoRow['budget_amount']."'</td>";
    echo "</tr>";
    $budgetRowCount++;
}
else{
    echo "<tr id='selected_budget_row". $budgetRowCount ."'>";
    echo "<td><input type='text' id='budget-roofs' name='budget-roofs[]' value='".$budgetInfoRow['budget_roofs']."'</td>";
    echo "<td><input type='text' id='budget-roof-area' name='budget-roof-area[]' value='".$budgetInfoRow['budget_roof_area']."'</td>";
    echo "<td><input type='text' id='budget-recommendation' name='budget-recommendation[]' value='".$budgetInfoRow['budget_recommendation']."'</td>";
    echo "<td><input type='text' id='budget-amount' name='budget-amount[]' value='".$budgetInfoRow['budget_amount']."'</td>";
    echo "<td><a href='#' class='removeRow' data-remove-row='budget_row". $budgetRowCount . "'>Remove</a></td>";
    echo "</tr>";
    $budgetRowCount++;
}
}

echo "</table>";

echo"<input type='button' value='+' id='addNewBudgetRow'     class='addNewBudgetRow'/>";

这就是我试图克隆我的行并将其添加到我的表中的方式：

$(function() {

var $removeIDVal = 0;

$(document.body).on('click', '.addNewBudgetRow', function () {
    var $emptyBudgetTableRow = $("#new_budget_row0").clone();
    $removeIDVal++
    var $emptyBudgetTableRowClone = $emptyBudgetTableRow.clone();
    var $newRowID = 'added_budget_row' + $removeIDVal;
    $emptyBudgetTableRowClone.attr('id', $newRowID)
    $emptyBudgetTableRowClone.children('td').last().after('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Remove</a></td>');
    $(this).closest("fieldset").find("tbody").append($emptyBudgetTableRowClone);
    $emptyBudgetTableRowClone.show();
   });
});

我有一个警告，检查按钮是否实际上正在开火，我的警报显示没有问题，但我似乎无法将其克隆并正确追加，我已在其他地方多次完成此操作而没有任何问题。我在哪里错了？

如何解决这个问题，以便我的行能够正确克隆并添加到表格的末尾？

Answer 1

您没有选择表格，因为您没有<fieldset>或<tbody>。按ID选择。

Alos你两次克隆新行，你有多个相同的ID。

$(document.body).on('click', '.addNewBudgetRow', function () {
    var $emptyBudgetTableRowClone = $("#new_budget_row0").clone();
    $removeIDVal++
    var $newRowID = 'added_budget_row' + $removeIDVal;
    $emptyBudgetTableRowClone.attr('id', $newRowID)
    $emptyBudgetTableRowClone.children('td').last().after('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Remove</a></td>');
    $('#selected_budget_table').append($emptyBudgetTableRowClone);
    $emptyBudgetTableRowClone.show();
   });
});

$(function() {

var $removeIDVal = 0;

$(document.body).on('click', '.addNewBudgetRow', function () {
    var $emptyBudgetTableRowClone = $("#new_budget_row0").clone();
    $removeIDVal++
    var $newRowID = 'added_budget_row' + $removeIDVal;
    $emptyBudgetTableRowClone.attr('id', $newRowID)
    $emptyBudgetTableRowClone.children('td').last().after('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Remove</a></td>');

    // Select you table by id
    $('#selected_budget_table').append($emptyBudgetTableRowClone);
    $emptyBudgetTableRowClone.show();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='selected_budget_table'>
    <tr>
        <th>Roofs</th>
        <th>Roof Area</th>
        <th>Recommendations</th>
        <th>Amount</th>
        <th>Remove</th>
   </tr>
   <tr id='new_budget_row0' style='display: none;'>
        <td><input id='budget-roofs' name='budget-roofs[]' /></td>
        <td><input id='budget-area' name='budget-area[]' /></td>
        <td><input id='budget-recommendation' name='budget-recommendations[]' /></td>
        <td><input id='budget-amount' name='budget-amount[]'/> </td>
   </tr>
</table>

<input type='button' value='+' id='addNewBudgetRow' class='addNewBudgetRow'/>

Answer 2

我把它放在jsFiddle上，发现+修复了一些问题：

http://jsfiddle.net/lumpie/nprsdb2m/

$(function() {
    var $removeIDVal = 0;
    $(document.body).on('click', '.addNewBudgetRow', function () {
        var $emptyBudgetTableRow = $("#new_budget_row0");
        $removeIDVal++
        var $emptyBudgetTableRowClone = $emptyBudgetTableRow.clone();
        var $newRowID = 'added_budget_row' + $removeIDVal;
        $emptyBudgetTableRowClone.attr('id', $newRowID)
        $emptyBudgetTableRowClone.append('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Remove</a></td>');

        $("#selected_budget_table").append($emptyBudgetTableRowClone);

        // Logic to remove a row:
        $emptyBudgetTableRowClone.find(".removeRow").click(function() { 
            $(this).parents("tr").remove();
        });
        $emptyBudgetTableRowClone.show();
    });
});

啊，只是一分钟太晚了，Rene Korss略微领先于我。

但是嘿：我已经包含了一些额外的：使删除按钮工作的逻辑：）

克隆表行并将其添加到表的末尾

2 个答案: