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>