<html>
<head>
<title>JS example</title>
<script type="text/javascript">
FOO = {}; // minimalist namespace declaration.
FOO._origList = {}; // "hash of lists" for the Perl hackers.
FOO.sortList = function(listID) {
var theList = document.getElementById(listID);
if (!theList) {
throw "no such list: " + listID;
}
// let's assume it's all plain text.
var items = theList.getElementsByTagName('li');
var textList = [];
for (var i=0; i < items.length; i++) {
textList[i] = items[i].firstChild.nodeValue; // YMMV.
}
// cache the original the first time only (deep copy).
if (!FOO._origList[listID]) {
FOO._origList[listID] = [];
for (var i in textList) {
FOO._origList[listID][i] = textList[i];
}
}
// now set up the sorted list.
textList.sort();
FOO.setListFromArray(theList,textList);
};
FOO.unsortList = function(listID) {
var theList = document.getElementById(listID);
if (!theList) {
throw "no such list: " + listID;
}
// only bother if we were sorted previously.
if (FOO._origList[listID]) {
FOO.setListFromArray(theList,FOO._origList[listID]);
}
};
FOO.setListFromArray = function(theList,textArray) {
// zero out the list
while (theList.childNodes.length) {
theList.removeChild(theList.childNodes[0]);
}
// repopulate it with text
for (var i=0; i < textArray.length; i++) {
var item = document.createElement('li');
var textNode = document.createTextNode(textArray[i]);
item.appendChild(textNode);
theList.appendChild(item);
}
}
// but really, REALLY you want to use a toolkit for this...
</script>
</head>
<body>
<h1>JS example</h1>
<ol id="sortTarget">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<p>
<a href="javascript:FOO.sortList('sortTarget');">sort alpha</a>
<a href="javascript:FOO.unsortList('sortTarget');">undo</a>
</p>
<hr />
<ol id="another">
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
</ol>
<p>
<a href="javascript:FOO.sortList('another');">sort alpha</a>
<a href="javascript:FOO.unsortList('another');">undo</a>
</p>
</body>
</html>