Alternierende Hintergrundfarbe in einer Tabelle mit jQuery

Mit jQuery lässt sich eine Tabelle mit zeilenweise alternierender Hintergrundfarbe sehr einfach implementieren. Mit dem folgenden Code muss lediglich die Style-Klasse „alternating_row“ festgelegt werden:

Beispiel:

jQuery-Code:

$(document).ready(function()
{
  $("table.alternating_row tr:even").css("background-color", "#EBDDE2");
  $("table.alternating_row tr:odd").css("background-color", "#C8BBBE");
});

HTML-Code:

<table class="alternating_row">
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
        <th>Spalte 3</th>
        <th>Spalte 4</th>
    </tr>
    <tr>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
    </tr>
    <tr>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
    </tr>
    <tr>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
    </tr>
    <tr>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
    </tr>
</table>

Anzahl der Elemente eines Objekts in JavaScript ermitteln

In JavaScript wird häufig ein Objekt als Ersatz für ein assoziatives Array verwendet. Daraus ergibt sich die Problematik, dass die Anzahl der Elemente eines Objekts nicht ohne Weiteres ermittelt werden kann. Abhilfe schafft der folgende Code:

var oTestObject = new Object();

oTestObject['element1'] = "Wert1";
oTestObject['element2'] = "Wert2";
oTestObject['element3'] = "Wert3";
oTestObject['element4'] = "Wert4";

Object.getLength = function(oTmpObject)
{
    var iLength = 0;

    for (var sKey in oTmpObject)
    {
        if (oTmpObject.hasOwnProperty(sKey)) iLength++;
    }
    return iLength;
};

//Anzahl der Elemente ermitteln
var iLength = Object.getLength(oTestObject); //4

Demo:

jQuery Select2 3.1 Plugin

Select2 3.1 ist ein jQuery Plugin (siehe http://ivaynberg.github.com/select2/) mit dem die Usability und Optik von Auswahlfeldern deutlich verbessert werden kann. Das Schöne an diesem Plugin ist, dass man als Entwickler mit wenig Aufwand mächtige Funktionen in Auswahl-Felder integrieren kann. Wie z.B.:

    • Text-Suche mit autosuggest
    • facebook-artige Mehrfachauswahl
    • Nachladen von Daten per Ajax

Zwei Beispiele, wie soetwas aussehen kann:

Code:

    <script>
    $(document).ready(function()
    {
        $("#select1").select2();
        $("#select2").select2();
    });
    </script>


Links:

Demo | Select2 3.1 Homepage