Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 807
understack Avatar asked Apr 01 '10 13:04

understack


People also ask

How do I insert a row in the middle of a table?

Click where you want in your table to add a row or column and then click the Layout tab (this is the tab next to the Table Design tab on the ribbon). To add rows, click Insert Above or Insert Below and to add columns, click Insert Left or Insert Right.

Can you add a new row in the middle of an existing table?

You can add rows to an existing table in two ways: Use Edit > Add Row to enter a new row one-at-a-time. Use File > Import more rows to bring in rows from a file.

How to add a new row in a table using JavaScript?

The insertRow() method creates an empty <tr> element and adds it to a table. The insertRow() method inserts the new row(s) at the specified index in the table. Note: A <tr> element must contain one or more <th> or <td> elements. Tip: Use the deleteRow() method to remove a row.


2 Answers

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

or

newrow.insertAfter('#rowid');

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

like image 54
jAndy Avatar answered Oct 19 '22 00:10

jAndy


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.

like image 30
geowa4 Avatar answered Oct 19 '22 00:10

geowa4