使用jquery时在表上方插入的行

Row being inserted above table when using jquery

本文关键字：插入 方插入 jquery 使用      更新时间：2023-09-26

我正试图在我的网站上使用jquery填充一个表。当我在HTML页面上手动编写HTML时，它是有效的，但当我用div替换它并使用jquery将HTML附加到它时，它会在表头上方插入HTML。

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

我手动输入的行（Adult，4.99，0，）都按原样显示，但附加到div ticketconfirmation的行显示在表上方。一旦用户在最初输入数据的页面上按continue，就会调用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>");
    }
};

删除您的<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);
    }

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

您可以在tbody上提供id ticketconfirmation并删除该div。

相关文章：