basti1012.bplaced.net

Drei Wege toggelt. Markiere eine Spalte in Rot, Grün oder in Orange

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>