Jquery追加到表TR答案

【问题标题】：Jquery append to table TRJquery追加到表TR
【发布时间】：2017-10-07 05:19:22
【问题描述】：

我正在使用以下 jQuery 代码附加到我的表中：

        $("tbody#order_details").append('<tr>...</tr><tr>...</tr>');
        $("tbody#order_details").append('<tr>...</tr><tr>...</tr>');

但是，当它执行时，它会将<tr>...</tr><tr>...</tr> 放在页面顶部，而不是当前<tbody id="order_details"> 开始位置的下方。

表格代码是这样的：

      <table border="1" cellspacing="0" cellpadding="0" id="OrdersTable" 
            style="border: 1px solid black; margin-top: 0px;">
        <tbody>
        <tr>
            <th>Account Number</th>
            <td colspan="3">99996</td>
            <th>Email</th>
            <td colspan="5"><asp:Label ID="billing_email" runat="server" Text="Label"></asp:Label></td>
            </tr>
        <tr>
        etc etc....
        </tbody>
             <tbody id="order_details"> 
                <!-- Start looping the orders here -->

             </tbody>
        </table>

为了在<tbody id="order_details"> 之后添加这两行，我忘了放什么？

【问题讨论】：

为什么你有一个开始的tbody标签和一个结束的thead标签
我知道这不是您问题的答案，但是在 Jquery 中为表生成行相当长的一段时间后，我发现 Knockout.js 使这类问题变得容易了 1000 倍。 Check out this tutorial，也许会有所帮助（请记住，这是系列教程中的第二个）
你查看过错误控制台吗？有什么吗？
@mplungjan：我很确定 ... 的意思是“这里的东西我为了简洁起见不包括在内”，而不是文字 ...。问题似乎确实是两个tbody 标签，其中第一个应该是thead。大多数浏览器会自动更正无效标记，因此 OP 实际上有两个 tbody 标签，因此行将附加到每个标签。
我更正了 OP 中的表格布局。

标签： jquery html-table append

【解决方案1】：

只需将此 html 更改为：

      <table border="1" cellspacing="0" cellpadding="0" id="OrdersTable" style="border: 1px solid black; margin-top: 0px;">
        <thead>
        <tr>
            <th>Account Number</th>
            <th colspan="3">99996</th>
            <th>Email</th>
            <th colspan="5"><asp:Label ID="billing_email" runat="server" Text="Label"></asp:Label></th>
        </tr>
        etc etc....
        </thead>
        <tbody id="order_details"> 
          <!-- Start looping the orders here -->

        </tbody>
        </table>

我认为是因为 HTML 标记，我希望这会有所帮助。

【讨论】：

<td> 仍在<thead> 内。他也不能只将<tr> with no <td> 附加到他的<tbody>。
头部还有一个未闭合的标签，第 th 个元素的 colspan 属性以及头部中看起来像数据的东西。我认为除了一点标记错误之外，还有更大的问题。

【解决方案2】：

您必须在 TD 中写入“...”。应该 ... 。

为了获得更好的性能，请仅使用 #order_details 而不是 tbody#order_details。由于 ID 是唯一的，jQuery 总能找到正确的元素，而无需指定标签名称

【讨论】：

【解决方案3】：

您的标记无效，因此 jQuery 无法理解该做什么。

我用我认为你想要的东西创建了一个 jsFiddle：http://jsfiddle.net/DSLBT/

【讨论】：

【解决方案4】：

试试这个 ::

$("tbody#order_details").append('<tr><td>...</td></tr><tr><td>...</td></tr>');

【讨论】：

这导致它位于表格的底部。