Table Doesn't append rows in Jquery

Question

I want to request a sub-html page then append it another html and the content of the sub-html has a table.

Now I want to request another ajax request to request the table content and append them to the table.

The First request (sub-html) page success, but my code doesn't append content to the table.

sub- html page:

<div class="Queue">
<h3>Queue</h3>

<table class="table table-hover" id="driverQueueTable">
    <thead>
    <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 4</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

js code:

$(document).ready(function () {
    $(".queue").click(function () {
        $.ajax({
            url: "sidebarContent/table",
            success: function (result) {
                $('.content').html(result);
            }
        });
        $("#driverQueueTable").find('tbody')
            .append($('<tr>')
            .append($('<td>').append($('<a>').text('Image cell')))
            .append($('<td>').append($('<a>').text('Image cell')))
            .append($('<td>').append($('<a>').text('Image cell')))
            .append($('<td>').append($('<a>').text('Image cell').attr('href', ''))));
    });
});

I didn't request a second ajax for the table content yet, because I am trying to append the content and it doesn't work.

Answer 1

Table id you are using is wrong. You should change #driverQueueTable to #myTable

 $(document).ready(function () { $("#myTable").find('tbody') .append($('<tr>') .append($('<td>').append($('<a>').text('Image cell'))) .append($('<td>').append($('<a>').text('Image cell'))) .append($('<td>').append($('<a>').text('Image cell'))) .append($('<td>').append($('<a>').text('Image cell').attr('href', ''))) ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Queue"> <h3>Queue</h3> <table class="table table-hover" id="myTable"> <thead> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> </tr> </thead> <tbody></tbody> </table>