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

时间:2010-04-01 13:21:31

标签: jquery html-table row

我有一张桌子,上面有客户名字以及他们购买的产品及其价格。因此每个客户都有多条记录。此表是简单的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>

2 个答案:

答案 0 :(得分:19)

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

newrow.insertAfter('#rowid');

其中#rowid是您要添加新行的行中的ID。

答案 1 :(得分:8)

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

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

现在,获取最后一个

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

使用after函数插入新行。