Question

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

它正在提取用户在不同标签上的表格上创建的信息，要求用户在提交前确认输入。

我手动输入的行（Adult，4.99,0，）都显示为应该显示的行，但是附加到div ticket确认的行显示在表格的上方。一旦用户在最初输入数据的页面上按下继续，就会调用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

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票证确认并删除该div。

Answer 2

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

使用jquery时在行上方插入行

2 个答案: