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

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

Answer 2

I've put it up on jsFiddle and found + fixed some issues:

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

Ah, just a minute too late, Rene Korss was slightly ahead of me.

But hey: I've included a little extra: logic to make the Remove button work :)