如何使用jQuery在表的中间添加行？ [英] How to add rows in middle of a table with jQuery?

问题描述

我有一张桌子，上面有顾客名字和他们购买的产品及价格。因此每个客户都有多条记录。这个表是简单的3列表：名称，产品和价格。

I've a table which has customers names along with the products they purchased with their prices. So there are multiple records for each customer. This table is simple 3 column table : name, product and price.

我想做的是：

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

Put all records belonging to one customer together (I've done it) and just after these rows add one new extra row which would just show total price of all the products each customer has purchased. This row would have empty cell in name and product column. And would have total in price column.

编辑

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

It's just a plain simple table without any class or ids. customer wise grouped Table is generated by php. So I've a table like this

<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>

推荐答案

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

Using jQuery you can select all rows where the username is contained within one of it's descendant elements. I'm assuming usernames are unique.

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

现在，获取最后一个

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

并在函数后使用插入新行。

And use the after function to insert your new row.

这篇关于如何使用jQuery在表的中间添加行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！