JSFiddle - React, Tailwind, and code Playground

by andreas_karz

HTML

<table id="theTable">
   <colgroup width="1" id="eigenschaft">
    <col id="eigenschaft_namen"/>
   </colgroup>
   <colgroup width="4" id="innere">
    <col id="merkur"/>
    <col id="venus"/>
    <col id="erde"/>
    <col id="mars"/>
   </colgroup>
   <colgroup width="5" id="aeussere">
    <col id="jupiter"/>
    <col id="saturn"/>
    <col id="uranus"/>
    <col id="neptun"/>
    <col id="pluto"/>
   </colgroup>
   <thead>
    <tr>
     <th>Eigenschaft</th>
     <th>Merkur</th>
     <th>Venus</th>
     <th>Erde</th>
     <th>Mars</th>
     <th>Jupiter</th>
     <th>Saturn</th>
     <th>Uranus</th>
     <th>Neptun</th>
     <th>Pluto</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th></th>
     <td>Fuss</td>
     <td>zeile</td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <th>Entfernung von der Sonne</th>
     <td>57,9 Mill. km</td>
     <td>108,2 Mill. km</td>
     <td>149,6 Mill. km</td>
     <td>227,9 Mill. km</td>
     <td>778,4 Mill. km</td>
     <td>1426,7 Mill. km</td>
     <td>2870,9 Mill. km</td>
     <td>4498,3 Mill. km</td>
     <td>5906,4 Mill. km</td>
    </tr>
    <tr>
     <th>Durchmesser</th>
     <td>4879 km</td>
     <td>12100 km</td>
     <td>12756 km</td>
     <td>6905 km</td>
     <td>142984 km</td>
     <td>120536 km</td>
     <td>51118 km</td>
     <td>49528 km</td>
     <td>2390 km</td>
    </tr>
    <tr>
     <th>Anzahl der Monde</th>
     <td>0</td>
     <td>0</td>
     <td>1</td>
     <td>2</td>
     <td>63</td>
     <td>34</td>
     <td>27</td>
     <td>13</td>
     <td>1</td>
    </tr>
    <tr>
     <th>Erstmals erreicht</th>
     <td>1974</td>
     <td>1962</td>
     <td> - </td>
     <td>1963</td>
     <td>1973</td>
     <td>1979</td>
     <td>1986</td>
     <td>1989</td>
     <td> - </td>
    </tr>
   </tbody>
  </table>

CSS

/* Formatierung einer Spaltengruppe */
    #innere {
        background-color: silver;
    }

/* Formatieren einer Spalte */
    #saturn {
        background-color: #DE822B;
    }

/* Zebra mit jQuery */
    .zebra {
        /* Fallback für IE */
        background-color: rgb(230, 230, 230);
        /* Alle anderen kennen den Alpha-Kanal */
        background-color: rgba(230, 230, 230, 0.6);
    }

/* Mouseover auf Zeile */
    #theTable tr:hover {
        cursor: pointer;
        background-color: #D82034 !important;
        color: #fff;
    }

/* THs formatieren, diese können auch als Spalte sein */
    th {
        font-weight: bold;
        background-color: #D82034;
        color: #FFFFFF; 
    }

/* Hilfslinien */
    #theTable {
        border: 1px solid silver;
        border-collapse: collapse;
    }
    #theTable td, #theTable th {
        border-bottom: 1px solid silver;
    }

body {
    margin: 20px;
    font-family: arial;
    font-size: 0.8em;
}

JavaScript

jQuery(document).ready(function() {

    // Zebra formatieren
    jQuery('#theTable tbody tr:even').addClass('zebra');

    // Daten aus Tabellenspalte lesen
    jQuery('#theTable thead th').click(function() {
        var tCol = jQuery(this).index();
        if(tCol>0){
            var tRows = jQuery('#theTable tbody tr');
            var Cdata = '';
            jQuery(tRows).each(function(index) {
                var tCols = jQuery(this).find('td');
                Cdata += jQuery(tCols[tCol-1]).html() + ', ';
            });
                alert(Cdata);
        }
    });

    // Daten aus Tabellenzeile lesen
    jQuery('#theTable tbody tr').click(function() {
        var tRow = jQuery(this).index();
        var tCol3 = jQuery(this).find('td')[2];
        alert('In der 3. Spalte steht: ' + jQuery(tCol3).html());
    });

});