Question

I have a HTML table that contains price information. The table is sorted be price Ascending. I’m looking to update the table with a new price item. I’m pretty sure jquery should be able to solve this issue. Here is my starting table:

<table id='priceTable'>
<tr id="25607">
    <td>
        Item 1
    </td>
    <td>
        $256.07
    </td>
    <td>USD</td>
</tr>
<tr id="30100">
    <td>
        Item 2
    </td>
    <td>
        $301.00
    </td>
    <td>USD</td>
</tr>
<tr id="30557">
    <td>
        Item 3
    </td>
    <td>
        $305.57
    </td>
    <td>USD</td>
</tr>
</table>

I need to insert a new row.

<tr id="29000">
        <td>
            Item 5
        </td>
        <td>
            $290.00
        </td>
        <td>USD</td>
    </tr>

This row needs to be inserted between the with id 25607 and id 30100.

I’m thinking that there should be a way to use the id of the tr’s (Which are the prices with only numbers). Possibly sort the ids and figure out where the new item should be inserted.

Answer 1

Yes, jQuery is able to solve this issue.

var row = '<tr id="29000"><td>Item 5</td><td>$290.00</td><td>USD</td></tr>';
var $tr = $(row);

$('#priceTable tr')
         .add($tr) // add the new tr to the collection
         .sort(function(a, b){  // sort them
             return a.id > b.id
         }) 
         .appendTo('#priceTable'); // end of the game

http://jsfiddle.net/PTxjk/