Experiment Tabellen Sortieren und Totalberechnung

Schalte die Konsole ein!

HTML Tabelle "Highlights"
<table border=1  id=tabelle >
  <caption style="caption-side:top" ><h2>Tabelle für Tests</h2></caption>
   <colgroup>
	<col>
	<col>
	<col style="background-color:#dfd;" > 
  </colgroup>

<tfoot>
  <tr>
    <td>Produkte</td>
    <td></td>
    <td id="totalCHF" class="zahl">0.00</td>
  </tr>
</tfoot>

<thead>	
  <tr>
    <th onclick="sortieren(0);">Produkt</th>
    <th onclick="sortieren(1);">Verfügbarkeit</th>
    <th id="preis" onclick="sortieren(2);" style="background-color: yellow; cursor: pointer;">Preis CHF</th>
  </tr>
</thead>
	
<tbody id="koerper">
  <tr>
    <td>Laptop</td>
    <td>2</td>
    <td class="zahl">99.95</td>
  </tr>
  <tr>
    <td>Desktop</td>
    <td>4</td>
    <td class="zahl">75.00</td>
  </tr>
 ...
</tbody>

<script>
/**********************************************************************
1) Tabellenkörper in ein Array lesen. Der Tabellenkörper hat die id 'koerper'
Das Total für eine Bestimmte Spalte wird errechnet
2) Der Array muss sortiert werden
3) Der Array in die Tabelle zurückschreiben 
4) Sortieren bei Klick (hier nur die letzte Spalte)
***********************************************************************/

// erst starten wenn DOM geladen ist
if(window.addEventListener) window.addEventListener("DOMContentLoaded",sortierVariablenInitialisieren,false); // Wartet bis DOM geladen ist
function sortierVariablenInitialisieren()
{
   	console.log("DOM ist geladen!");
	datenArrayEinlesen(-1);	// Liest das DatenArray ein und errechnet dabei auch das Total der im Argument angegebene Spalte (-1 = Keine Rechnung)
	sortieren(2);
	VariablenZeigen();
}
// 1) Tabellenkörper in ein Array lesen. Der Tabellenkörper hat die id 'koerper'
var koerper = document.getElementById("koerper");
var zeilen = koerper.children;
var nzeilen = zeilen.length;
var nspalten = zeilen[0].children.length;  // nur die erste Zeile wird gemessen
var datenArray = new Array(nspalten + 1);
// Tabelleninhalt ins Array kopieren
var z = 0; // Zeilen-Schleifenzähler
var s = 0; // Spalten-Schleifenzähler

var totalWert = 0;

// Der Array muss sortiert werden
var sortiert = false;
var sortiertesArray;
var sortierspaltealt = -1;

function sortieren(sortierspalte)
{
	if(sortierspalte != sortierspaltealt) sortiert = false;
	console.log("sortierspalte = ",sortierspalte , "sortierspaltealt = ",sortierspaltealt,"sortiert = ",sortiert);
	if(sortiert)
	{
		sortiertesArray = datenArray.reverse(); 
	}
	else
	{
		if(isNaN(Number(datenArray[0][sortierspalte]))) // Number(datenArray[0][sortierspalte]) != NaN 
		{
			var sortiertesArray = datenArray.sort((a, b) => {
			return a[sortierspalte] > b[sortierspalte];
			})
		}
		else
		{
			sortiertesArray = datenArray.sort((a, b) => {
			return eval(a[sortierspalte]) > eval(b[sortierspalte]); // parseFloat
			})
		}
				
		sortiert = true;
		sortierspaltealt = sortierspalte;
	}
	// Der Array in die Tabelle zurückschreiben 
	for(z=0;z < nzeilen;z++) 
	{
		for(s=0;s < nspalten;s++) 
		{
			zeilen[z].children[s].innerText = sortiertesArray[z][s];
		}
	}
	

}

function datenArrayEinlesen(totalSpalte)
{
	totalWert = 0;
	for(z=0;z < nzeilen;z++) 
	{
		datenArray[z] = new Array(nspalten);

		for(s=0;s <  nspalten;s++) 
		{
			datenArray[z][s] = zeilen[z].children[s].innerText;
		}
		if(totalSpalte >= 0) totalWert += Number(datenArray[z][totalSpalte]);
	}
	if(totalSpalte >= 0) document.getElementById("totalCHF").innerText = totalWert ;
}
	
	
function VariablenZeigen()
{
	console.log("Variablenliste: ");
	console.log("koerper: ",koerper);
	console.log("zeilen: ",zeilen);
	console.log("nzeilen: ",nzeilen);
	console.log("nspalten: ",nspalten);
	console.log("datenArray: ",datenArray);
	console.log("sortiertesArray: ",sortiertesArray);
	
	console.log("Variablenliste Ende. ");
}

</script>