drei-wegel-toggle-tabellen-zeile-markieren.php

Quell Code

<style>
main {
    background: white;
	border-color: #8a9da8;
	height: 700px;
	overflow: hidden;
}

table,
th,
td {
	border: 1px solid blue;
	border-collapse: collapse;
	padding: 0.3em;
}
/* Zebra-Streifen für ungerade Zeilen */

tr:nth-child(odd) {
	background-color: #eee;
}
/* 2. und 3. Spalte rechtsbündig */

td:nth-of-type(2),
td:nth-of-type(3) {
	text-align: right;
}



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



<h1>Datensatzauswahl 1</h1>

<div id="test"></div>

<main>
    <p>Klicken Sie in eine Tabellenzelle um die ganze Tabellenzeile zu markieren.</p>
	<table  class="sortierbar"	id="auswaehlbar">
    <thead>
			<tr>

				<th>Land</th>
				<th>Fläche</th>
				<th>Einwohner</th>
			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Baden-Württemberg</td>
				<td>35.751</td>
				<td>10,631</td>
			</tr>
			<tr>
				<td>Bayern</td>
				<td>70.550</td>
				<td>12,604</td>
			</tr>
			<tr>
				<td>Berlin</td>
				<td>892</td>
				<td>3,422</td>
			</tr>
			<tr>
				<td>Brandenburg</td>
				<td>29.654</td>
				<td>2,449</td>
			</tr>
			<tr>
				<td>Bremen</td>
				<td>419</td>
				<td>0,657</td>
			</tr>
			<tr>
				<td>Hamburg</td>
				<td>755</td>
				<td>1,746</td>
			</tr>
			<tr>
				<td>Hessen</td>
				<td>21.115</td>
				<td>6,045</td>
			</tr>
			<tr>
				<td>Mecklenburg-Vorpommern</td>
				<td>23.212</td>
				<td>1,597</td>
			</tr>
			<tr>
				<td>Niedersachsen</td>
				<td>47.613</td>
				<td>7,791</td>
			</tr>
			<tr>
				<td>Nordrhein-Westfalen</td>
				<td>34.110</td>
				<td>17,572</td>
			</tr>
			<tr>
				<td>Rheinland-Pfalz</td>
				<td>19.854</td>
				<td>3,994</td>
			</tr>
			<tr>
				<td>Saarland</td>
				<td>2.569</td>
				<td>0,991</td>
			</tr>
			<tr>
				<td>Sachsen</td>
				<td>18.420</td>
				<td>4,046</td>
			</tr>
			<tr>
				<td>Sachsen-Anhalt</td>
				<td>20.452</td>
				<td>2,245</td>
			</tr>
			<tr>
				<td>Schleswig-Holstein</td>
				<td>15.800</td>
				<td>2,816</td>
			</tr>
			<tr>
				<td>Thüringen</td>
				<td>16.173</td>
				<td>2,161</td>
			</tr>

		</tbody>
        <tfoot>
    		<tr class="sortbottom hintergrundfarbe5">
				<td><b>Bundesrepublik Deutschland</b> (DE)</td>
				<td><b>357.340</b>
				</td>
				<td><b>80,767</b>
				</td>
			</tr>
        </tfoot>
		</table>

</main>
<script>

    var rows = document.getElementById('auswaehlbar')
		.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
	for (i = 0; i < rows.length; i++) {
		rows[i].addEventListener('click', function () {

       

     if(this.style.backgroundColor=='orange'){
          this.style.background='red';
          return;
     }
     
     if(this.style.backgroundColor=='red'){

          this.style.background='green';
          return;
     }
      if(this.style.backgroundColor=='green'){
           this.style.background='none';    
           return;
     }else{
           this.style.background='orange';
           return;
		}
     
		});
	}
//f=window.getComputedStyle(document.querySelector("table"));
//for(a=0;a<=f.length;a++){
//document.getElementById('test').innerHTML+=f[a]+'<br>';
//}

var elem = document.querySelector('table');

var styles = window.getComputedStyle(elem);
 document.write("<table>");
if (window.getComputedStyle) {
   for (var i=0; i<styles.length; i++) {
   dd=window.getComputedStyle(elem).getPropertyValue(val);
gg=dd.replace('none','');
   if(gg==''){

fabe='red';
   }else{
fabe ='green';
   }
      var val = styles[i];
      
 document.write(" <tr style='background:"+fabe+"'>     <td>" +i + "</td>      <td> "+ val + "</td>      <td> "+ dd + "</td></tr>");
   }
  document.write("</table>");
}




(function () {
    "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 sorttype = new Array(nspalten);
			var sortbuttonStyle = document.createElement('style'); // Stylesheet für Button im TH
			sortbuttonStyle.innerText =
				'.sortbutton { width:100%; height:100%; border: none; background-color: transparent; font: inherit; color: inherit; text-align: inherit; padding: 0; cursor: pointer; } .sortbutton::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
			document.head.appendChild(sortbuttonStyle);
			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, s) {
					var val = ele.innerHTML;
					if (!isNaN(val) && val.search(/[0-9]/) != -1) return val;
					var n = val.replace(",", ".");
					if (!isNaN(n) && n.search(/[0-9]/) != -1) return n;
					sorttype[s] = "s"; // String
					return val;
				} // getData
			var vglFkt_s = function (a, b) {
					var as = a[sortiert],
						bs = b[sortiert];
					if (as > bs) return 1;
					else return -1;
				} // vglFkt_s
			var vglFkt_n = function (a, b) {
					return parseFloat(a[sortiert]) - parseFloat(b[sortiert]);
				} // vglFkt_n
			var tsort = function (sp) {
					if (sp == sortiert) arr.reverse(); // Tabelle ist schon nach dieser Spalte sortiert, also nur Reihenfolge umdrehen
					else { // Sortieren
						sortiert = sp;
						if (sorttype[sp] == "n") arr.sort(vglFkt_n);
						else 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);
			// Array mit Info, wie Spalte zu sortieren ist, vorbelegen
			for (var s = 0; s < nspalten; s++) sorttype[s] = "n";
			// 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], s);
					arr[z][s] = zi;
					// zelle[s].innerHTML += "<br>"+zi+"<br>"+sorttype[s]; // zum Debuggen
				}
			}
		} // 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
})();

</script>