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

Question

I am trying to clone and append a table row when the user selects my add rows button. I have an empty hidden row that is used to clone. I can't seem to get it to work how I need it too.

I output my form with PHP and looks something like this:

$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'/>";

And this is how I am attempting to clone my row and add it to my table:

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

I had an alert to check if the button was actually firing and my alert showed up no problem, however I can't seem to get it to clone and append properly and I have done this several times elsewhere with no issues. Where am I going wrong here?

How can I fix this so that my row gets cloned properly and added to the end of my table?

Answer 1

You are not selecting your table, since you have no <fieldset> or <tbody>. Select it by id.

Alos you were cloning new row twice and you have multiple same ids.

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

</div>