JavaScript: DHTML Insertion Sort
This page demonstrates the Insertion Sort algorithm by applying it to the below HTML table - sorting rows by the values in each column.
Working Demonstration
Use the controls under the table to apply different sort orders. The script will rearrange the rows (too quick to be seen) according to the insertion sort algorithm which involves repeated movements.
| id | colour | random |
|---|---|---|
| 1 | orange | 280 |
| 2 | red | 223 |
| 3 | red | 423 |
| 4 | green | 446 |
| 5 | yellow | 445 |
| 6 | yellow | 622 |
| 7 | red | 917 |
| 8 | blue | 756 |
| 9 | red | 783 |
| 10 | red | 721 |
| 11 | blue | 857 |
| 12 | purple | 459 |
| 13 | purple | 228 |
| 14 | yellow | 886 |
| 15 | yellow | 968 |
| 16 | orange | 221 |
| 17 | red | 10 |
| 18 | green | 186 |
| 19 | blue | 982 |
| 20 | red | 969 |
How does it work?
For a more detailed discussion on the sorting process, you can refer to the Bubble Sort page. The only difference between the two is the actual sorting algorithm, with the Insertion Sort, in theory, being a little bit faster:
/* global variables */
var parent = null; /* parent node */
var items = new Array(); /* array of 'child' nodes */
var col = 0; /* column for sorting */
function sortTable(tableid, n, desc)
{
parent = document.getElementById(tableid);
col = n;
if(parent.nodeName != "TBODY") {
parent = parent.getElementsByTagName("TBODY")[0];
}
if(parent.nodeName != "TBODY") {
return false;
}
/* assert: parent is now a TBODY node */
items = parent.getElementsByTagName("TR");
var N = items.length;
/* insertion sort */
for(var j=1; j < N; j++) {
for(var i=j; i > 0 && compare(get(i), get(i-1), desc); i--) {
exchange(i, i-1);
}
}
}
The compare, get and exchange functions are common to all the different sorting algorithm implementations and can be found documented here.
For more advanced (and complicated) sorting techniques, see the Shell Sort and Quick Sort demonstrations.
Related Articles - Sorting Algorithms
- JavaScript DHTML Sorting Algorithms
- JavaScript DHTML Quick Sort
- JavaScript DHTML Insertion Sort
- JavaScript DHTML Bubble Sort
- JavaScript Sorting Algorithm Comparison
- JavaScript DHTML Sorting Using OOP - Example 1
- JavaScript DHTML Shell Sort
- PHP Sorting Arrays of Arrays
- PHP Sorting SimpleXMLElement Object arrays