Sort table rows

HTML

<div style="margin-bottom:1em">Sort order: <input type="text" id="order" /></div>
<table border="1" id="sort">
<thead style="font-weight:bold">
    <tr><td>Data</td><th>Sort</th></tr>
</thead>
<tbody class="zebra">
    <tr data-rowid="1"><td>Data 1</td><td><a href="#up" class="sort">^</a>&nbsp;<a href="#down" class="sort">v</a></td></tr>
    <tr data-rowid="2"><td>Data 2</td><td><a href="#up" class="sort">^</a>&nbsp;<a href="#down" class="sort">v</a></td></tr>
    <tr data-rowid="3"><td>Data 3</td><td><a href="#up" class="sort">^</a>&nbsp;<a href="#down" class="sort">v</a></td></tr>
    <tr data-rowid="4"><td>Data 4</td><td><a href="#up" class="sort">^</a>&nbsp;<a href="#down" class="sort">v</a></td></tr>
</tbody>    
</table>

JavaScript

function getSortOrder() {
    var $rows = $('#sort tbody tr'),
        index, sortOrder = '';

    for (index = 0; index < $rows.length; index++) {
        if (sortOrder != '') {
            sortOrder += ',';
        }

        sortOrder += $($rows[index]).attr('data-rowid');
    }

    $('#order').val(sortOrder);
}

function sortRow(e) {
    var $this = $(this),
        $row = $this.parents('tr:first'),
        sortDir = $this.attr('href').replace('#', ''),
        $sibling;

    e.preventDefault();
    if (sortDir == 'up') {
        $sibling = $row.prev();
        if ($sibling.length > 0) {
            $sibling.before($row);
        }
    }
    else if (sortDir == 'down') {
        $sibling = $row.next();
        if ($sibling.length > 0) {
            $sibling.after($row);
        }
    }

    getSortOrder();
}