zweifarbiges Zebra mit Chamäleonzeile

♫	Firma	Vorname	Nachname	Telefon	Fax	Email	website	Straße Nr.	Plz.	Ort
***	Muster-Unternehmen	Maximilian	Mustermensch	++49 1234 56 78 90	++49 1234 56 78 91	max@mustermensch.net	mustermensch.net	Beispielweg 99	01234	Musterhausen-Beispielsen
*	a	b	c	++31 9	++31 9	d	e	f	98765	g
**	G	F	E	++41 55	++41 55	D	C	B	23456	A

Paket als zip-Datei herunterladen.

nun noch die code-snippets der Modifikationen:

in der Datei 'sort_table.js':


1. Modifikation, direkt zu Begin des codes, unterhalb der Versions-Vermerke:

aus:

        // Das Element das angezeigt wird, wenn die Spalte abwärts sortiert ist
           SortTable.up = String.fromCharCode(9660);
           SortTable.alt_up = 'Aufwärts sortieren';

        // Das Element das angezeigt wird, wenn die Spalte aufwärts sortiert ist
           SortTable.down = String.fromCharCode(9650);
           SortTable.alt_down = 'Abwärts sortieren';

wurde, um die Umlaute zu umgehen:

        // Das Element das angezeigt wird, wenn die Spalte abwärts sortiert ist
           SortTable.up = String.fromCharCode(9660);
           SortTable.alt_up = 'aufsteigend sortieren';

        // Das Element das angezeigt wird, wenn die Spalte aufwärts sortiert ist
           SortTable.down = String.fromCharCode(9650);
           SortTable.alt_down = 'absteigend sortieren';


2. Modifikation, innerhalb des click-Events, um die Richtungszeiger abzuschalten:

statt:

        pointer.style.visibility = 'hidden';
            [...]
        if(last_sort) last_sort.style.visibility = 'hidden';
        pointer.style.visibility = '';
nun:

        pointer.style.display = 'none';
            [...]
        if(last_sort) last_sort.style.display = 'none';
        pointer.style.display = 'none';

Die Anweisung 'display: none;' benötigte erst Platz in der Tabellenzelle, wenn der Zustand 'inline' aktiviert würde.
Hingegen 'visibility: hidden;' bzw. 'visibility: ;' verbreitern die Zelle immer um die Zeichenbreite des Zeigers,
was mit der variablen Tabellen-Eigenschaft 'width: auto;' nicht schön ist, wenn die Breite minimal bleiben soll.
Die zentrierten Spaltentitel der header-Zeile bleiben so optisch immer mittig, die sonst nach links verschoben wurden.
Die komplette Abschaltung erfolgte ebenfalls wegen 'width: auto;', damit die Spaltenbreiten sich nicht ständig ändern.


3. Modifikation ziemlich am Ende des codes, wegen der Zweifarbigkeit:

aus:

        // umhängen
        var tCopy = tableBody.cloneNode(false);
        for(var i = 0; i < tr_length; i++) {
                if(zebra) {
                    rows[i].elem.className = rows[i].elem.className.replace(/( ?odd)/, "");
                    if(i % 2) rows[i].elem.className += ' odd' ;

wurde:

        // umhängen
        var tCopy = tableBody.cloneNode(false);
        for(var i = 0; i < tr_length; i++) {
                if(zebra) {
                    rows[i].elem.className = rows[i].elem.className.replace(/( ?odd)/, "");
                    rows[i].elem.className = rows[i].elem.className.replace(/( ?notodd)/, "");
                    if(i % 2) rows[i].elem.className += ' notodd' ;
                    if(i+1 % 2) rows[i].elem.className += ' odd' ;

in der Datei 'zebra.js':


Am Ende der Funktion ZebraTabelle(t) lediglich die letzte Zeile ergänzen.

        function ZebraTabelle(t) {
            var obj = t;
            var rows = [];
            var self = this;
            var hasBody = !!t.getElementsByTagName('tbody').length;
            var body = t.getElementsByTagName('tbody').length ?
        t.getElementsByTagName('tbody')[0] : t;
            var rows = body.getElementsByTagName('tr');
                for(var i = 0; i < rows.length; i += 2) rows[i].className += ' odd';

diese hier ==>  for(var i = 1; i < rows.length; i += 2) rows[i].className += ' notodd';

und nachfolgend noch der html code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
 <meta http-equiv="imagetoolbar" content="no">
 <!-- IE imagetoolbar deaktivieren; für einzelne TAGs: <img src="" title="" galleryimg="no"> -->
<html>
<head>

<title>zweifarbiges Zebra mit Chamäleonzeile</title>

  <script type="text/javascript" src="ltrim.js"></script>
  <script type="text/javascript" src="sort_table.js"></script>
  <script type="text/javascript" src="zebra.js"></script>

<script type="text/javascript">
//<!-- 
window.onload = function() {
SortTable.init();
ZebraTabelle.init();
}
// -->
</script>

<style type="text/css">
.odd {border-bottom: 0.2em solid rgb(255, 255, 255); background-color: rgb(230, 230, 230); height: 25px;}
.notodd {border-bottom: 0.2em solid rgb(255, 255, 255); background-color: rgb(245, 220, 120); height: 25px;}
</style>

<script type="text/javascript">
//<!--                         /* IE & Netscape */
function highlight(rowNum){
if (navigator.appName=='Microsoft Internet Explorer'){
var u = rowNum;
curCol = document.getElementsByTagName("tr")[u].currentStyle.backgroundColor;
document.getElementsByTagName("tr")[u].style.backgroundColor='rgb(60,220,50)'
}
else if (navigator.appName=='Netscape'){
var u = rowNum;
curCol = window.getComputedStyle(document.getElementsByTagName("tr")[u],"null" ).getPropertyValue("background-color");
document.getElementsByTagName("tr")[u].style.backgroundColor='rgb(60,220,50)'
}
}
function dimm(rowNum){
var m = rowNum;
document.getElementsByTagName("tr")[m].style.backgroundColor=curCol;
document.getElementsByTagName("tr")[m].removeAttribute("style");
}
// -->
</script>

</head>
<body>
<center>
<!-- Editor-Preview zeigt CSS und dynamisches HTML nicht an, deshalb <table> mit
     background-color: rgb(210, 220, 220); (wegen des Kontrastes zum Seitenhintergrund) -->
<table class="sortable, zebra"
 style="text-align: left; width: auto; background-color: rgb(210, 220, 220); color: rgb(0, 0, 0); 
 font-family: Arial; font-size: 8pt; border-collapse: collapse; white-space: nowrap; vertical-align: middle;"
 border="0" cellpadding="4" cellspacing="0">
  <colgroup> <col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0.1em solid rgb(255, 255, 255); width: auto;"><col
 style="border-right: 0em solid rgb(255, 255, 255); width: auto;"></colgroup><thead>
  <tr
 style="border-bottom: 0.18em solid rgb(255, 255, 255); padding-left: 5px; background-color: rgb(160, 160, 160); 
 color: rgb(255, 255, 255); text-align: center; font-size: 10pt; font-weight: bold; height: 25px;">
    <th>♫</th>
    <th>Firma</th>
    <th>Vorname</th>
    <th>Nachname</th>
    <th>Telefon</th>
    <th>Fax</th>
    <th>Email</th>
    <th>website</th>
    <th>Straße Nr.</th>
    <th>Plz.</th>
    <th>Ort</th>
  </tr>
  </thead><tbody>
    <tr onmouseover="highlight(rowIndex)" onmouseout="dimm(rowIndex)">
      <td>***</td>
      <td>Muster-Unternehmen</td>
<!-- 
    Für den IE müssten alle <th> bzw. <td> tags mit style="" versehen werden,
    da die border-Anweisungen der css-styles (.odd & .notodd) für <tr> nicht interpretiert werden.
    (Microsoft halt.. ach ja)
    <td style="border-bottom: 0.2em solid rgb(255, 255, 255); border-right: 0.1em solid rgb(255, 255, 255);"><br></td>
 -->
      <td>Maximilian</td>
      <td>Mustermensch</td>
      <td>++49 1234 56 78 90</td>
      <td>++49 1234 56 78 91</td>
      <td><a href="mailto:max@mustermensch.net">max@mustermensch.net</a></td>
      <td><a href="http://www.mustermensch.net" target="_blank">mustermensch.net</a></td>
      <td>Beispielweg 99</td>
      <td>01234</td>
      <td>Musterhausen-Beispielsen</td>
    </tr>
    <tr onmouseover="highlight(rowIndex)" onmouseout="dimm(rowIndex)">
      <td>*</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>++31 9</td>
      <td>++31 9</td>
      <td>d</td>
      <td>e</td>
      <td>f</td>
      <td>98765</td>
      <td>g</td>
    </tr>
    <tr onmouseover="highlight(rowIndex)" onmouseout="dimm(rowIndex)">
      <td>**</td>
      <td>G</td>
      <td>F</td>
      <td>E</td>
      <td>++41 55</td>
      <td>++41 55</td>
      <td>D</td>
      <td>C</td>
      <td>B</td>
      <td>23456</td>
      <td>A</td>
    </tr>
  </tbody>
</table>
</center>
</body>
</html>