Drei wege Toggle
Drei Wege toggelt. Markiere eine Spalte in Rot, Grün oder in Orange
Der hier verwendete 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;
}
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>';
//}
</script>