skip to content

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
1red887
2yellow724
3yellow529
4green684
5green600
6red220
7blue660
8orange733
9green912
10purple876
11yellow612
12yellow945
13green352
14green605
15purple439
16purple908
17red345
18blue333
19red429
20yellow607

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.

< JavaScript

Post your comment or question
top