JavaScript – Seite 3

PHP: Simple Table Builder

Simple Table Builder ist eine PHP Klasse, mit der sich HTML-Tabellen auf Grundlage eines mehrdimensionalen Arrays erzeugen lassen. Um die Usability zu verbessern wurde das jQuery-Plugin „Flexigrid“ (http://flexigrid.info) verwendet.

Features:

Titel-Text

Definition der Spaltenüberschriften

Höhe und Breite der Tabelle festlegen

Spaltensortierung

Definition der Spaltenbreite

Festlegen einer Standard-Spaltenbreite

Screenshot:

Anwendungsbeispiel:

require_once('SimpleTableBuilder.php');

$aTableData = array_fill(0, 15, array('Vorname' => 'Max', 'Nachname' => 'Mustermann', 'Straße' => utf8_decode('Musterstraße 10')));
$oSimpleTableBuilder = new SimpleTableBuilder();
$oSimpleTableBuilder->setHeader('Vorname', array('Nachname' => '150'), utf8_decode('Straße')); //Die Breite einer Spalte kann über ein Array definiert werden (In diesem Fall: 150 Pixel). Ansonsten wird der Standardwert verwendet.
$oSimpleTableBuilder->setTitle('Mein Array'); //Festlegen der Tabellen-Überschrift (optional)
$oSimpleTableBuilder->setTableData($aTableData); //Hier wird das Array übergeben, aus dem eine Tabelle erzeugt wird.
$oSimpleTableBuilder->setHeight('300'); //Festlegen der Höhe (optional)
$oSimpleTableBuilder->setWidth('600'); //Festlegen der Breite (optional)
echo $oSimpleTableBuilder->buildTable(); //Tabelle erzeugen

PHP: Simple Table Builder weiterlesen

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

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: