javascript - 使用 jquery 时在表上方插入行

Question

我正在尝试在我的网站上使用 jquery 填充表格。当我在 HTML 页面上手动编写 HTML 时，它可以工作，但是当我用 div 替换它并使用 jquery 将 html 附加到它时，它会将 HTML 插入到表格标题上方。

它正在提取用户在不同选项卡上的表格上创建的信息，以要求用户在提交之前确认输入。

我手动输入的行 (Adult, 4.99, 0,) 都按其应有的方式显示，但附加到 div TicketConfirmation 的行显示在表格上方。一旦用户在最初输入数据的页面上按“继续”，就会调用 Jquery。

谁能解释一下为什么会发生这种情况？

谢谢

HTML

<table class="table table-hover">
    <thead>
    <tr>
        <th>Ticket Name</th>
        <th>Ticket Price</th>
        <th>Max Quantity</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Adult/td>
        <td>4.99</td>
        <td>0</td>
    </tr>
    <div id="ticketconfirmation"></div>
    </tbody>

JQuery

function getNodes() {
    console.log("Getting node info");
    $("#ticketconfirmation").text('');
    var table = $('#sample_editable_1').DataTable();

    var data = table.rows().data();

    for (var i = 0; i < data.length; i++) {
        $("#ticketconfirmation").append('<tr>');
        var row = table.row(i).data();
        $("#ticketconfirmation").append(
                "<td>" + row[0] + " </td><td> " + row[1] + " </td><td> "
                        + row[2] + "</td></tr>");
    }
};

Answer 1

删除您的<div id="ticketconfirmation"></div>并尝试这个:

   var newRow;
   for (var i = 0; i < data.length; i++) {        
        var row = table.row(i).data();
        newRow = "<tr><td>" + row[0] + " </td><td> " + row[1] + " </td><td> "
                        + row[2] + "</td></tr>";
        $('table.table tbody').append(newRow);
    }