Sorting an HTML table with JavaScript The following code sorts an HTML table with JavaScript (without using any external libraries like jQuery). Are there any shortcomings or possible improvements I could make?



&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=Windows-1252"&gt;
    &lt;script type="text/javascript"&gt;
        var people, asc1 = 1,
            asc2 = 1,
            asc3 = 1;
        window.onload = function () {
            people = document.getElementById("people");
        }

        function sort_table(tbody, col, asc) {
            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 &lt; rlen; i++) {
                cells = rows[i].cells;
                clen = cells.length;
                arr[i] = new Array();
                for (j = 0; j &lt; 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] &gt; b[col]) ? asc : -1 * asc);
            });
            // replace existing rows with new rows created from the sorted array
            for (i = 0; i &lt; rlen; i++) {
                rows[i].innerHTML = "&lt;td&gt;" + arr[i].join("&lt;/td&gt;&lt;td&gt;") + "&lt;/td&gt;";
            }
        }
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        table {
            border-collapse: collapse;
            border: none;
        }
        th,
        td {
            border: 1px solid black;
            padding: 4px 16px;
            font-family: Times New Roman;
            font-size: 24px;
            text-align: left;
        }
        th {
            background-color: #C8C8C8;
            cursor: pointer;
        }
    &lt;/style&gt;
&lt;/head&gt;

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

&lt;/html&gt;
To speed up the sorting you first have to find what is consuming time. In your case the slower part of your code is:

for(i = 0; i &lt; rlen; i++){
    rows[i].innerHTML = "&lt;td&gt;"+arr[i].join("&lt;/td&gt;&lt;td&gt;")+"&lt;/td&gt;";
}


The reason is that the DOM elaboration is time consuming for the browser.

Here's an updated version that minimizes the access to the DOM:

function sort_table(tbody, col, asc){
    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 &lt; rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j &lt; 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] &gt; b[col]) ? asc : -1*asc);
    });
    for(i = 0; i &lt; rlen; i++){
        arr[i] = "&lt;td&gt;"+arr[i].join("&lt;/td&gt;&lt;td&gt;")+"&lt;/td&gt;";
    }
    tbody.innerHTML = "&lt;tr&gt;"+arr.join("&lt;/tr&gt;&lt;tr&gt;")+"&lt;/tr&gt;";
}


Proof: http://jsperf.com/table-sorting-stack-overflow