Table sorting stack overflow

Benchmark created on

Preparation HTML

<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;">Surname</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;">Age</th>
</tr>
</thead>
<tbody id="people">
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
</tbody>
</table>
</body>

Setup

var tbody, asc1 = 1, asc2 = 1, asc3 = 1;
  tbody = document.getElementById("people");

Test runner

Ready to run.

Testing in
TestOps/sec
New
var asc = 1, col = 0;
var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
// fill the array with values from the table
    for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < clen; j++){
        arr[i][j] = cells[j].innerHTML;
        }
    }
// sort the array by the specified column number (col) and order (asc)
arr.sort(function(a, b){
    return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
});
    for(i = 0; i < rlen; i++){
        arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
ready
Old
var asc = 1, col = 0;var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
// fill the array with values from the table
    for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < clen; j++){
        arr[i][j] = cells[j].innerHTML;
        }
    }
// sort the array by the specified column number (col) and order (asc)
arr.sort(function(a, b){
    return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
});
// replace existing rows with new rows created from the sorted array
    for(i = 0; i < rlen; i++){
        rows[i].innerHTML = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.