Sorting a table row after appending a new table row

Question

Hey all

I have some jQuery ajax where it appends a new row to a table from adding some form data. I like to add a function where after the row has been appended it sorts by a field value within the tables. So here is a table with some dummy data.

<table>
    <tr><td><input type="text" name="hour[from]" value="1"> Hour From</td><td><input type="text" name="hour[to]" value="3"> Hour To</td></td></tr>
    <tr><td><input type="text" name="hour[from]" value="6"> Hour From</td><td><input type="text" name="hour[to]" value="8"> Hour To</td></td></tr>
    <tr><td><input type="text" name="hour[from]" value="5"> Hour From</td><td><input type="text" name="hour[to]" value="6"> Hour To</td></td></tr>
</table>

So after the functions runs I would like it to be sorted by the hour[from] field. So it would end up like the below.

<table>
    <tr><td><input type="text" name="hour[from]" value="1"> Hour From</td><td><input type="text" name="hour[to]" value="3"> Hour To</td></td></tr>
    <tr><td><input type="text" name="hour[from]" value="5"> Hour From</td><td><input type="text" name="hour[to]" value="6"> Hour To</td></td></tr>
    <tr><td><input type="text" name="hour[from]" value="6"> Hour From</td><td><input type="text" name="hour[to]" value="8"> Hour To</td></td></tr>
</table>

I am not sure how to go about this task. I know how to run an each but no idea how to sort. Can this be done ?

Hope you can advise.

TY

Answer 1

You could take a look at the TableSorter plugin.