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

Question

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

我的目标是：

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

编辑

这只是一个简单的表格，没有任何类或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>

- understack

---

你是如何为每个客户划分行的？使用类？还是ID？如果你有可识别的东西，那么获取该行并在DOM中修改它应该很容易。 - justkt

你能提供一些HTML代码吗？这样我们就可以看到你给元素赋予的类名等信息。 - Felix Kling

Answer 1

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

或者

newrow.insertAfter('#rowid');

在这里，#rowid 是你想要添加新行的行ID。

- jAndy

---

我用了这个答案。非常有帮助 :) 顺便问一下，有没有办法使插入动画化？ :D - Obay

Answer 2

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

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

现在，获取最后一个。

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

使用after函数插入新行。

- geowa4

---

好的，我明白了。我可以根据名称添加类并使用您的技巧。但是我认为首先必须获取所有名称的列表。 - understack