Lösungen ,sortierbaretabelle

sortierbaretabelle.php

Quell Code

 
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Sortierbare Tabelle mit Creat Element</title>
    <style>
      
      table {
    border: 1px solid black;
	border-spacing: 0px;
	border-collapse: collapse
}

table td {
	border: 1px solid black;
	border-spacing: 0px;
	border-collapse: collapse;
	padding: 3px
}

table th {
	border: 1px solid black;
	border-spacing: 0px;
	border-collapse: collapse;
	padding: 3px
}

table h2 {
	margin: 0
}



.sortbutton { width:100%; 
  height:100%; 
  border: none;
  background-color:red; 
  font: inherit; 
  color: inherit;
  text-align: inherit; 
  padding: 0; 
  cursor: pointer; 
}
.sortbutton::-moz-focus-inner {
  margin: -1px;
  border-width: 1px; 
  padding: 0; 
}





    </style>
  </head>
  <body>
<h1>Sortierbare Tabelle</h1>
<h4>Einfach im roten Bereich klicken und die Tabellen werden nach gräße sortiert</h4>

<table id="eins"></table>
<main>
	<table class="sortierbar">
		<thead>
			<tr>
				<th>Lfd. Nr.</th>
				<th>Name</th>
				<th>Punkte</th>
				<th>Note</th>
				<th>Bemerkung</th>
			</tr>
		</thead>
    <tbody>
	<!--	
			<tr>
				<td>1</td>
				<td>Matthias</td>
				<td>9</td>
				<td>2.5</td>
				<td>Normal</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Gunnar</td>
				<td>12</td>
				<td>1.2</td>
				<td><b>Fett</b>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Christian</td>
				<td>8</td>
				<td>3.5</td>
				<td><i>Kursiv</i>
				</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Janosch</td>
				<td>11</td>
				<td>1,4</td>
				<td><a href="#">Link</a>
				</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Raoul</td>
				<td>10</td>
				<td>2.1</td>
				<td><b><a href="#">Fetter Link</a></b>
				</td>
			</tr>
			<tr>
				<td>6</td>
				<td>Jürgen</td>
				<td>7</td>
				<td>3.9</td>
				<td>
					<h2>Überschrift</h2>
				</td>
			</tr>

		-->
      </tbody>
		<tfoot>
			<tr>
				<td colspan=5>GEHT SO NICHT</td>
			</tr>
		</tfoot>
	</table>
</main>
<script>
 
   los();
	"use strict";
	var tableSort = function (tab) {
			var titel = tab.getElementsByTagName("thead")[0].getElementsByTagName("tr")[
				0].getElementsByTagName("th");
			var tbdy = tab.getElementsByTagName("tbody")[0];
   
			var tz = tbdy.rows;
			var nzeilen = tz.length;
			if (nzeilen == 0) return;
			var nspalten = tz[0].cells.length;
			var arr = new Array(nzeilen);
			var sortiert = -1;
			var initTableHead = function (sp) { // Kopfzeile vorbereiten
				var b = document.createElement("button");
				b.type = "button";
				b.className = "sortbutton";
				b.innerHTML = titel[sp].innerHTML;
				b.addEventListener("click", function () {
					tsort(sp);
				}, false);
				titel[sp].innerHTML = "";
				titel[sp].appendChild(b);
			}
			var getData = function (ele) {
				return ele.innerHTML;
			}
			var vglFkt_s = function (a, b) {
					var as = a[sortiert],
				  bs = b[sortiert];
					if (as > bs) return 1;
					      else return -1;
				  } // vglFkt_s
			var tsort = function (sp) {
					if (sp == sortiert) arr.reverse(); // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen
					else { // Sortieren
						sortiert = sp;
						arr.sort(vglFkt_s);
					}
					for (var z = 0; z < nzeilen; z++) tbdy.appendChild(arr[z][nspalten]); // Sortierte Daten zurückschreiben
				} // tsort
				// Kopfzeile vorbereiten
			for (var i = 0; i < titel.length; i++) initTableHead(i);
			// Tabelleninhalt in ein Array kopieren
			for (var z = 0; z < nzeilen; z++) {
				var zelle = tz[z].getElementsByTagName("td"); // cells;
				arr[z] = new Array(nspalten + 1);
				arr[z][nspalten] = tz[z];
				for (var s = 0; s < nspalten; s++) {
					var zi = getData(zelle[s]);
					arr[z][s] = zi;
				}
			}
		} // tableSort
	var initTableSort = function () {
			var sort_Table = document.querySelectorAll("table.sortierbar");
			for (var i = 0; i < sort_Table.length; i++) new tableSort(sort_Table[i]);
		} // initTable
	if (window.addEventListener) window.addEventListener("DOMContentLoaded",
		initTableSort, false); // nicht im IE8

 
 

function los(){
d1=document.getElementsByTagName('tbody')[0];
for(p=0;p<=10;p++){
var tr = document.createElement("tr");
    tr.className="trclass";
    tr.id="tr"+p;    
 

d1.appendChild(tr);
 
for(g=0;g<=4;g++){
//tr1=document.getElementById("tr'+p+'");
var td = document.createElement("td");
    td.className="tdclass";
    td.id='td'+g;
var min = 1;
var max = 50;
var x = Math.round(Math.random() * (max - min)) + min;
  
  td.innerHTML=x;
  
tr.appendChild(td);
}
 
}
}
</script>
</body>
</html>