如何使用jQuery在表格中间添加行？

Posted 2023-03-05

【中文标题】如何使用jQuery在表格中间添加行？

【英文标题】：How to add rows in middle of a table with jQuery?

【发布时间】：2011-02-03 08:58:54

【问题描述】：

我有一张表格，其中包含客户姓名以及他们购买的产品及其价格。因此，每个客户都有多条记录。此表是简单的 3 列表：名称、产品和价格。

我想做的是：

将属于一位客户的所有记录放在一起（我已经完成了），然后在这些行之后添加一个新的额外行，该行将显示每个客户购买的所有产品的总价格。此行将在名称和产品列中有空单元格。并且会在价格列中显示总计。

编辑

这只是一个简单的表，没有任何类或 ID。客户明智的分组表由 php 生成。所以我有一张这样的桌子

<table>
    <tr>
        <td> name1 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <tr>
        <td> name1 </td>
        <td> product2 </td>
        <td> 200 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product3 </td>
        <td> 50 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
</table> 

我想把它转换成：

<table>
    <tr>
        <td> name1 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <tr>
        <td> name1 </td>
        <td> product2 </td>
        <td> 200 </td>
    </tr>
    <!-- New row -->
    <tr>
        <td>  </td>
        <td>  </td>
        <td> 300 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product3 </td>
        <td> 50 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <!-- New row -->
    <tr>
        <td>  </td>
        <td>  </td>
        <td> 150 </td>
    </tr>
</table>

【问题讨论】：

您如何为每个客户划分行？一类？身份证？如果你有一些可识别的东西，应该很容易获取该行并在其后修改 DOM。

你能提供一些html代码吗？这样我们就可以看到你给元素等的类名。

【参考方案1】：

var prize = 1 * 1;
    var newrow = $('<tr><td></td><td></td><td>' + prize + '</td></tr>');
    $('#rowid').after(newrow);

或

newrow.insertAfter('#rowid');

其中#rowid 是您要追加新行的行中的 id。

【讨论】：

我使用了这个答案。非常有帮助:) 顺便说一句，有没有办法为插入设置动画？ :D

【参考方案2】：

使用 jQuery，您可以选择用户名包含在其后代元素之一中的所有行。我假设用户名是唯一的。

$("tr:contains('" + username + "')")

现在，得到最后一个

$("tr:contains('" + username + "')").last()

并使用after 函数插入新行。

【讨论】：

好的，我明白了。我可以根据名称添加类并使用您的技巧。但我想我必须先得到所有名字的列表。