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
1red877
2yellow458
3orange104
4green886
5red131
6purple22
7green2
8green608
9green75
10purple718
11purple591
12orange820
13purple812
14green84
15purple501
16yellow497
17blue898
18blue828
19purple14
20purple837

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