表不会在Jquery

时间:2018-02-10 13:51:36

标签: javascript jquery html ajax

我想请求一个sub-html页面,然后将它附加到另一个html,并且sub-html的内容有一个表格。

现在我想请求另一个ajax请求来请求表内容并将它们附加到表中。

第一个请求(sub-html)页面成功,但我的代码没有将内容附加到表格中。

sub-html页面:

<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', ''))));
    });
});

我还没有为表格内容请求第二个ajax,因为我试图附加内容并且它不起作用。

1 个答案:

答案 0 :(得分:1)

您使用的表ID是错误的。您应该将#driverQueueTable更改为#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>