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

Rory McCrossan · Accepted Answer · 2015-11-13 09:04:52Z

3

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

edited Nov 13, 2015 at 9:04

answered Aug 4, 2015 at 19:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MinusFour Over a year ago

The sort function is kind of wrong, see this: stackoverflow.com/questions/31749051/sorting-divs-using-jquery/…

Blake Yarbrough Over a year ago

@MinusFour so the .sort() method may do some weird things with out-of-date browsers, but modern browsers are fine right? To be sure, nothing appears to be incorrect in the behavior of the input camparison function.

MinusFour Over a year ago

@LanguidSquid no, it's about sort using 3 different values (1, 0, -1) to sort out the array. When you do return a > b; you either return true or false, 1 or 0. Note: It's not really 1 and -1. Positive and Negative is more accurate.

Blake Yarbrough Over a year ago

@MinusFour I believe I see what you are saying now. The Comparison function passed in returns a (true or false) value as apposed to a (1, 0 or -1) value. This could cause some wonky behavior? While it works for the test data I have provided, maybe it requires some doctoring before being set free in the wilderness.

Rory McCrossan Over a year ago

@MinusFour You're right that this implementation of the sort() isn't strictly best practice - although it will work fine due to Javascript's loose data types. I'll amend it.

Collectives™ on Stack Overflow

Sorting HTML table by row data using Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related