Question

I am trying to append table rows to an existing table.

This is how my table is structured:

<div id="productListContainer">
    <table id="productListTable">
            <thead>
                <tr>
                    <td>
                        #
                    </td>
                    <td>
                        Product Name
                    </td>
                    <td>
                        Price
                    </td>
                    <td>
                        Quantity
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
</div>

With the following function I am trying to append a new table row:

function(data) {
                if (data.productAdded !== "undefined") {
                  $("#productListTable tr").append().html(data.productAdded);
                }
              }

Which successfully appends one row. However, if I select a different item which triggers the same function, then the added table row will be overwritten with the new one.

I am using this function within an ajax call as the success message.

‘data’ is a JSON object which contains productAdded which itself is the table row as a string.

Answer 1

What you want to do is append a row to the body of the table I assume. For this you’ll need to do this –

$("#productListTable tbody").append(html_string);

Your html_string will need to contain all the necessary <tr> and <td> elements to match up with your table’s header.

References –

• .append() documentation – http://api.jquery.com/append/
• jsFiddle demo