How to add rows in middle of a table with jQuery?

问题

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.

What I want to do is:

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.

EDIT

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>

And I want to convert this to :

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

回答1:

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 + "')")

Now, get the last one

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

And use the after function to insert your new row.

回答2:

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

newrow.insertAfter('#rowid');

where #rowid is an id from a row you want to append a new line.

来源：https://stackoverflow.com/questions/2560613/how-to-add-rows-in-middle-of-a-table-with-jquery

标签

jquery

html-table

row