./sklueh – Seite 10

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:

Links:
Demo | Select2 3.1 Homepage

Entfernen von überflüssigen Whitespaces aus HTML-Code mit PHP

Reduziert den Umfang des HTML-Codes indem überflüssige Whitespaces am Zeilenanfang und am Zeilenende durch einen regulären Ausdruck entfernt werden.

Code:

function minify($sHTML)
{
return preg_replace('/([\s\t\n]*)(<.*>)([\s\t\n]*)/', '$2', $sHTML);
}

Beispiel vorher:

<input type="submit" name="" id="doaction" class="button-secondary action" value="Übernehmen" />
</div>
<div class="alignleft actions">
<select name=\'m\'>
<option selected=\'selected\' value=\'0\'>Jedes Datum</option>
<option value=\'201206\'>Juni 2012</option>
<option value=\'201201\'>Januar 2012</option>
</select>
<select name=\'cat\' id=\'cat\' class=\'postform\' >
<option value=\'0\'>Alle Kategorien</option>
<option class="level-0" value="1">Allgemein</option>
<option class="level-0" value="5">C#</option>
<option class="level-0" value="10">JavaScript</option>
<option class="level-0" value="3">PHP</option>
<option class="level-0" value="9">reguläre Ausdrücke</option>
</select>

Beispiel nachher:

<input type="submit" name="" id="doaction" class="button-secondary action" value="Übernehmen" /></div><div class="alignleft actions"><select name='m'><option selected='selected' value='0'>Jedes Datum</option><option value='201206'>Juni 2012</option><option value='201201'>Januar 2012</option></select><select name='cat' id='cat' class='postform' ><option value='0'>Alle Kategorien</option><option class="level-0" value="1">Allgemein</option><option class="level-0" value="5">C#</option><option class="level-0" value="10">JavaScript</option><option class="level-0" value="3">PHP</option><option class="level-0" value="9">reguläre Ausdrücke</option></select>

Verhindern von Falscheingaben mit Hilfe von JavaScript und regulären Ausdrücken

Formulare müssen validiert werden, oft client- und serverseitig. Eine Lösung für eine clientseitige Validierung kann realisiert werden, indem man fehlerhafte Eingaben erst gar nicht zulässt. Mit Hilfe von JavaScript und regulären Ausdrücken ist dies mit einer Zeile möglich.

Beispiel:
Für ein Eingabefeld sollen nur numerische Werte erlaubt sein:

Zahl eingeben:

Code: