Sorting HTML table by row data using Javascript

Question

Question

Given the following HTML table

<table id="sort-table">
    <tbody>
        <tr>
            <td>text*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>text*1224</td>
            <td>data</td>
        </tr>
        <tr>
            <td>text*1254</td>
            <td>data</td>
        </tr>
        <tr>
            <td>texta*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>textabc*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>textab*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>*2234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>textabcd*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>text*1234</td>
            <td>data</td>
        </tr>
        <tr>
            <td>textabc*1234*1234</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

Is there a way to sort the rows inside of the 'sort-table' table by the value of the first <td> element in each <tr> element? Sorting should be Alphabetical by each 'text' first, and then numeric by the value after the * .

JQuery is available, but answers composed of vanilla Javascript will be preferred.

Attempted Solution

Using the following Javascript I have attempted to achieve the elusive functionality.

//get the rows of the table and put them in a NodeList
var tableRows = $("#sort-table")[0].children[0].children;
//create an empty 'tbody' element to replace the old table contents with
var tBody = document.createElement("tbody");
//get the old tbody element to replace it with an empty tbody element
var oldBody = $("#sort-table")[0].children[0];
//get the NodeList as an array
var rowsArray = [].slice.call(tableRows, 1);

//sort the array
rowsArray.sort();

//replace the current table body with an empty one
oldBody.parentNode.replaceChild(tBody, oldBody);

//put each array element in the new table body
rowsArray.forEach(function(entry) {
    var tableRef = document.getElementById('sort-table').getElementsByTagName('tbody')[0];

    // Insert a row in the table at the last row
    var newRow   = tableRef.insertRow(tableRef.rows.length);

    // Insert a cell in the row at index 0
    var newCell  = newRow.insertCell(0);

    newCell.appendChild(entry);
});

here is a jsfiddle showing how this currently works

Answer 1

You can use the sort() method to organise the rows in to the order required:

$('#sort-table tr').sort(function(a, b) {
    var aText = $(a).find('td:eq(0)').text();
    var bText = $(b).find('td:eq(0)').text();

    if (aText > bText)
        return 1;
    else if (aText < bText)
        return -1;
    return 0;
}).appendTo('#sort-table');

Updated example