Elementinhalte dynamisch ändern - nach ZWEI Kriterien

[Lucy]

Hallo liebe SelfHTML-Community,

Ich habe folgendes Problem:

Ich habe eine Tabelle mit einer Zelle pro Zeile. In dieser Zelle stehen zwei Wörter
(sieht ungefähr so aus:)

---------------------

Baum, natürlich
Tür, künstlich
-------------------
Zitrone, natürlich
---------------------

Jetzt möchte ich mit Hilfe von zwei links dafür sorgen, dass man selbstständig wählen kann ob man nun eine alphabethische Auflistung an Hand des ersten Wortes haben möchte, oder eine Auflistung an Hand der "Kategorien": künnstlich/natürlich.

bei meinem Versuch greife ich auf den Artikel <http://de.selfhtml.org/dhtml/modelle/dom.htm#elementinhalte@title=Elementinhalte dynamisch ändern> zurück.

Mein abgewandelter Code sieht so aus:

Javascript:

  
var geoArray = new Array(5, 4, 3, 2, 1, 0);  
var Art = "ABC";  
  
function ABC () {  
  if (Art == "ABC")  
    return;  
  Art = "ABC";  
  var dinge = new Array();  
  for (var i = 0; i < document.getElementsByTagName("td").length; i++)  
    dinge[dinge.length] = document.getElementsByTagName("td")[i].firstChild.nodeValue;  
  dinge.sort();  
  for (i = 0; i < document.getElementsByTagName("td").length; i++)  
    document.getElementsByTagName("td")[i].firstChild.nodeValue = dinge[i];  
  document.getElementById("Art").firstChild.nodeValue = "alphabetisch von A bis Z";  
}  
  
function GEO () {  
  if (Art == "GEO")  
    return;  
  Art = "GEO";  
  var dinge = new Array();  
  for (var i = 0; i < document.getElementsByTagName("td").length; i++)  
    dinge[dinge.length] = document.getElementsByTagName("td")[i].firstChild.nodeValue;  
  for (i = 0; i < document.getElementsByTagName("td").length; i++)  
    document.getElementsByTagName("td")[i].firstChild.nodeValue = dinge[geoArray[i]];  
  document.getElementById("Art").firstChild.nodeValue = "kategorisiert;d";  
}  

Und html:

  
  
<table width="50%" border="1">  
<tr>  
	<td>Baum, natürlich</td>  
</tr>  
<tr>  
	<td>Foto, künstlich</td>  
</tr>  
<tr>  
	<td>Distel, natürlich</td>  
</tr>  
<tr>  
	<td>Tür, künstlich</td>  
</tr>  
<tr>  
	<td>Sonne, natürlich</td>  
</tr>  
<tr>  
	<td>Zitrone, natürlich</td>  
</tr>  
  
</table>  
<form name="Formular" action="">  
<input type="button" name="abc" value="alphabetisch" onclick="ABC()">  
<input type="button" name="geo" value="geographisch" onclick="GEO()">  
</form>  

Ich hoffe ihr hab verstandden wie ich das meine. Also wenn man den einen Button drückt soll sich die Liste nach den beiden "Kategorien" richten und bei dem anderen nach den "dingen".

PS.:schon mal danke an euch :D ich hoffe ihr könnt mir helfen :P