<script language="JavaScript" src="domutils.js">
</script>
<script language="JavaScript">
<!--
setBrowser();
var ready = false;
var city;
var highTemp;
var lowTemp;
var order;
var nRows;
var sortedColumn;
var sortedAscending;
var centigrade = false;
function getObject( nameStr )
{
if (isNav6)
{
return document.getElementById( nameStr );
}
else if (isIE4)
{
return document.all[nameStr];
}
}
function makeDynamicText( tableDataCell, datum, columnNumber )
{
var newNode, newText;
/* numbers may have to be converted to centigrade */
if (columnNumber > 0 && centigrade)
{
datum = Math.floor( (datum-32)/9*5 );
}
/* if this isn't the sorted column, just create a
text node. If it's the sorted column, then create
a bold node with a child text node */
if (columnNumber != sortedColumn)
{
newNode = document.createTextNode( datum );
}
else
{
newNode = document.createElement("B");
newText = document.createTextNode( datum );
newNode.appendChild( newText );
}
tableDataCell.replaceChild( newNode,
tableDataCell.firstChild );
}
/******************************************************
Sort an array into ascending or descending order.
This uses the classical "bubble sort" algorithm,
which is good for short arrays but bad for
huge ones
*******************************************************/
function sort( whichColumn, ascending )
{
var i, j, n, temp;
var wTable = document.getElementById( "wTable" );
var tRows = wTable.childNodes;
var arrayRef;
if (isNav4)
{
return;
}
/* determine which array needs to be sorted */
if (whichColumn == 0)
{
arrayRef = city;
}
else if (whichColumn == 1)
{
arrayRef = highTemp;
}
else
{
arrayRef = lowTemp;
}
if (!ready)
{
return;
}
window.status = "Sorting...please wait.";
n = order.length;
for (i=0; i < n; i++)
{
order[i] = i;
}
for (i=0; i<n-1; i++)
{
for (j=i+1; j<n; j++)
{
mustSwap = (ascending) ?
arrayRef[order[i]] > arrayRef[order[j]]:
arrayRef[order[i]] < arrayRef[order[j]];
if (mustSwap)
{
temp = order[i];
order[i] = order[j];
order[j] = temp;
}
}
}
window.status = "";
/* set all images to light blue */
for (i=0; i<3; i++)
{
document["u"+i].src = "up0.gif";
document["d"+i].src = "dn0.gif";
}
/* then set this particular sorted column to solid blue */
if (ascending)
{
document["d"+whichColumn].src = "dn.gif";
}
else
{
document["u"+whichColumn].src = "up.gif";
}
/* globally store the current column and its sort status */
sortedColumn = whichColumn;
sortedAscending = ascending;
/* Now recreate the table nodes in sorted order */
for (i=0; i < nRows-1; i++)
{
/* Retrieve the child nodes of a table row.
Each of these nodes will correspond to a <td> */
thisRow = tRows[i+1].childNodes;
makeDynamicText( thisRow[0], city[order[i]], 0 );
makeDynamicText( thisRow[1], highTemp[order[i]], 1 );
makeDynamicText( thisRow[2], lowTemp[order[i]], 2 );
}
}
/*********************************************
Puts up text showing the scale in which
temperatures are displayed.
**********************************************/
function showCentigrade( whichWay )
{
var divNode;
var newText;
if (isNav4)
{
return;
}
/* If no change, ignore it */
if (centigrade == whichWay)
{
return;
}
divNode = getObject( "tempScale" );
centigrade = whichWay;
sort( sortedColumn, sortedAscending );
newText = document.createTextNode(
"Temperatures are shown in " +
((centigrade) ? "Centigrade." : "Fahrenheit.")
);
divNode.replaceChild( newText, divNode.firstChild );
}
function setupArrays()
{
var wTable = document.getElementById( "wTable" );
var tRows = wTable.childNodes;
var i;
if (isNav4)
{
return;
}
nRows = tRows.length;
city = new Array( nRows-1 );
highTemp = new Array( nRows-1 );
lowTemp = new Array( nRows - 1 );
order = new Array( nRows - 1 );
for (i=0; i < nRows-1; i++)
{
// get the children of this row
thisRow = tRows[i+1].childNodes;
city[i] = thisRow[0].firstChild.data;
highTemp[i] = parseInt(thisRow[1].firstChild.data);
lowTemp[i] = parseInt(thisRow[2].firstChild.data);
}
ready = true;
sort( 0, true );
}
// -->
</script>
</head>
<body bgcolor="#ffffff" onLoad="setupArrays();">
<p>
Click the blue arrows to select a column to sort, and the order
in which to sort it. Up arrows put the highest item at the top;
down arrows put the lowest item at the top.
<script language="JavaScript">
<!--
if (isNav4)
{
document.writeln("This example does not work with Netscape 4.");
}
//-->
</script>
</p>
<table border="0">
<tr>
<td>
<h3 align="center">International Weather Reports</h3>
<table border="1">
<tbody id="wTable">
<tr>
<th>
<a href="javascript:sort(0,false)"><img src="up0.gif"
name="u0" border="0"
align="middle" alt="sort descending" width="25" height="25"></a>
<br> City <br>
<a href="javascript:sort(0,true)"><img src="dn0.gif"
name="d0" border="0"
align="middle" alt="sort ascending" width="25" height="25"></a>
</th>
<th>
<a href="javascript:sort(1,false)"><img src="up0.gif"
name="u1" border="0"
align="middle" alt="sort descending" width="25" height="25"></a>
<br> High <br>
<a href="javascript:sort(1,true)"><img src="dn0.gif"
name="d1" border="0"
align="middle" alt="sort ascending" width="25" height="25"></a>
</th>
<th>
<a href="javascript:sort(2,false)"><img src="up0.gif"
name="u2" border="0"
align="middle" alt="sort descending" width="25" height="25"></a>
<br> Low <br>
<a href="javascript:sort(2,true)"><img src="dn0.gif"
name="d2" border="0"
align="middle" alt="sort ascending" width="25" height="25"></a>
</th>
</tr>
<tr class="shaded">
<td>Bangkok</td> <td>91</td> <td>75</td>
</tr>
<tr>
<td>Cairo</td><td>97</td><td>72</td>
</tr>
<tr class="shaded">
<td>Helsinki</td><td>59</td><td>48</td>
</tr>
<tr>
<td>Mexico City</td><td>72</td><td>57</td>
</tr>
<tr class="shaded">
<td>Sydney</td><td>57</td><td>46</td>
</tr>
</tbody>
</table>
<div id="tempScale">
Temperatures are shown in Fahrenheit.
</div>
</td>
<td>
<form>
<p>
<input type="button" value="Show Fahrenheit"
onClick="showCentigrade( false );">
</p>
<p>
<input type="button" value="Show Centigrade"
onClick="showCentigrade( true );">
</p>
</form>
</td>
</tr>
</tbody>
</table>