Entry
How can I sort a TABLE with DOM access in IE5 and NN6?
How can I sort a TABLE with DOM access in IE5 and NN6?
Apr 7th, 2000 09:31
Martin Honnen,
The following contains code and examples working with NN6 and IE5. Note
that how a table is sorted depends very much on what is in the table
cells and how you treat that content. The examples shown allow for
string, number and link comparison.
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function createRowsArray (table) {
var rows = new Array();
var r = 0;
if (table.tHead == null && table.tFoot == null)
for (var r1 = 0; r1 < table.rows.length; r1++, r++)
rows[r] = table.rows[r1];
else
for (var t = 0; t < table.tBodies.length; t++)
for (var r1 = 0; r1 < table.tBodies[t].rows.length; r1++, r++)
rows[r] = table.tBodies[t].rows[r1];
return rows;
}
function insertSortedRows(table, rows) {
if (document.all) var rowsCopy = new Array(rows.length)
for (var r = 0; r < rows.length; r++) {
if (document.all) rowsCopy[r] = rows[r].cloneNode(true);
table.deleteRow(rows[r].rowIndex);
}
var tableSection = table.tBodies[table.tBodies.length - 1];
for (var r = 0; r < rows.length; r++) {
var row = document.all ? rowsCopy[r] : rows[r];
tableSection.appendChild(row);
}
}
function sortTable (table, sortFun) {
var rows = createRowsArray(table);
if (rows.length > 0) {
rows.sort(sortFun);
insertSortedRows(table, rows);
}
}
function sortRowsAlpha (row1 , row2) {
var column = sortRowsAlpha.col;
var cell1 = row1.cells[column].firstChild.nodeValue;
var cell2 = row2.cells[column].firstChild.nodeValue;
return cell1 < cell2 ? - 1 : (cell1 == cell2 ? 0 : 1);
}
function sortRowsNumber (row1 , row2) {
var column = sortRowsNumber.col;
var cell1 = parseFloat(row1.cells[column].firstChild.nodeValue);
var cell2 = parseFloat(row2.cells[column].firstChild.nodeValue);
return cell1 < cell2 ? - 1 : (cell1 == cell2 ? 0 : 1);
}
function sortRowsLink (row1 , row2) {
var column = sortRowsLink.col;
var cell1 = findFirstLinkChild(row1.cells[column]).href;
var cell2 = findFirstLinkChild(row2.cells[column]).href;
return cell1 < cell2 ? - 1 : (cell1 == cell2 ? 0 : 1);
}
function findFirstLinkChild (el) {
var child = el.firstChild;
while (child.tagName != 'A')
child = child.nextSibling;
return child;
}
function testSortTable(table, col) {
sortRowsAlpha.col = col;
sortTable(table, sortRowsAlpha);
}
function testSortTableNumerical (table, col) {
sortRowsNumber.col = col;
sortTable(table, sortRowsNumber);
}
function testSortTableLinks (table, col) {
sortRowsLink.col = col;
sortTable(table, sortRowsLink);
}
function findTableParent (node) {
while (node.tagName.toUpperCase() != 'TABLE')
node = node.parentNode;
return node;
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON ONCLICK="testSortTable(document.getElementById('aTable'), 0);">
sort col 0
</BUTTON>
<BUTTON ONCLICK="testSortTableLinks(document.getElementById('aTable'),
1);">
sort col 1
</BUTTON>
<BUTTON ONCLICK="testSortTableNumerical(document.getElementById
('aTable'), 2);">
sort col 2 numerical
</BUTTON>
<BR>
<TABLE ID="aTable">
<THEAD>
<TR>
<TH ONCLICK="testSortTable(findTableParent(this), this.cellIndex);">
Name
</TH>
<TH ONCLICK="testSortTableLinks(findTableParent(this),
this.cellIndex);">
Home
</TH>
<TH ONCLICK="testSortTableNumerical(findTableParent(this),
this.cellIndex);">
Power
</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>
Xibo
</TD>
<TD>
<A HREF="http://www.xibo.com">
http://www.xibo.com
</A>
</TD>
<TD>
32
</TD>
</TR>
<TR>
<TD>
Maho
</TD>
<TD>
<A HREF="http://home.t-online.de/home/martin.honnen/jsgoddies.html">
http://home.t-online.de/home/martin.honnen/jsgoddies.html
</A>
</TD>
<TD>
44
</TD>
</TR>
<TR>
<TD>
Kibo
</TD>
<TD>
<A HREF="http://www.kibo.com">
http://www.kibo.com
</A>
</TD>
<TD>
42
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
