Editierbare HTML-Tabellen – ediTables 😉

Normalerweise ist das Bearbeiten von HTML (4) Tabellen nicht ohne Weiteres möglich. Im Netz habe ich auf die Schnelle nur Beispiele gefunden, die auf jQuery aufsetzen. Ich wollte das aber ohne jQuery lösen, daher habe ich die folgende Lösung gebastelt. Dieser Ansatz arbeitet (auch) ohne
jQuery und funktioniert gut für meine Zwecke.

Grundsätzlich funktioniert das so:

1. die Tabellenzellen werden mit einem DoubleClick-Handler (Javascript) ausgestattet, daher benötigt jede Zelle eine eindeutige ID – Meist kein Problem, da die Seiten, gerade bei Verwendung von Tabellen, ja meist ohnehin dynamisch generiert werden (PHP,…)

2. der DoubleClick-Handler ersetzt zur Laufzeit (eben bei DoubleClick) den Zelleninhalt durch ein Miniformular, welches wiederum den betreffenden Wert in einem Input-Tag als Wert enthält.

3. bei Verlassen des Feldes (Javascript onblur-Event) wird ein Submit des Formulars ausgelöst und die Änderungen werden an die gleiche (oder auch an eine andere) Seite per POST oder GET übergeben.

4. Die Seite wird neu geladen, dabei können die Daten weggeschrieben oder anderweitig ausgewertet werden

Hier also zunächst mal die Dateien: ediTable.html und styles.css   styles.css nicht zwingend erforderlich (Rechtsklick, Ziel speichern unter…)

Beginnen wir mal mit dem Javascript Part:

<script type="text/javascript" >

function cellDblClick(item) {
 elem = document.getElementById(item);
 val  = elem.innerHTML;
 elem.setAttribute("ondblclick", "");
 size = elem.innerHTML.toString().length;

 elem.innerHTML = "<form name='input_form' action='#' method='get'> " +
  " <input name='id' type='hidden' value='' /> " +
  " <input name='setData' class='textfield_effect' type='text' value='" +
  val + "' size='"+size+"' onblur='document.input_form.submit();' />" +
  "</form> ";
 document.input_form.id. value = item;
 document.input_form.setData.focus();
}
</script>

Hier wird der DoubleClick abgefangen und das Mini-Formular in die Tablecell (td-Tag) geschrieben.
Nebenbei wird noch ein verstecktes Feld gefüllt, welches uns später bei der Parameterübergabe hilft, die Daten zuzuordnen. Darin steht dann die ID des geänderten Feldes.


<table>
<tr>
<th>Nr</th>
<th style="width:130px;">Name</th>
<th style="width:260px;">Beschreibung</th>
<th>Preis</th>
</tr>
<tr>
<td>001</td>
<td id="N1" ondblclick="cellDblClick('N1');" >Quattro Stagioni</td>
<td id="B1" ondblclick="cellDblClick('B1');" style="white-space:nowrap" >K&auml;se, Salami, Schinken, Broccoli, Champignons</td>
<td id="P1" ondblclick="cellDblClick('P1');" >12,85 €</td>
</tr>
<tr>
<td>002</td>
<td id="N2" ondblclick="cellDblClick('N2');">Tonno</td>
<td id="B2" ondblclick="cellDblClick('B2');" style="white-space:nowrap" >Thunfisch, Zwiebeln, Oliven</td>
<td id="P2" ondblclick="cellDblClick('P2');">11,50 €</td>
</tr>
<tr>
<td>003</td>
<td id="N3" ondblclick="cellDblClick('N3');">Improwisita</td>
<td id="B3" ondblclick="cellDblClick('B3');" style="white-space:nowrap" >Lassen Sie sich &uuml;berraschen.</td>
<td id="P3" ondblclick="cellDblClick('P3');">15,20 €</td>
</tr>
</table>

Eine kleine HTML-Tabelle – sorry, wieder mal ein Pizzabeispiel 😉
Die IDs und die ondblclick Attribute werden im Normalfall von einem PHP-Script oder Ähnlichem erzeugt.

Wird nun per Doppelklick eine Zelle zum Bearbeiten göffnet, wird diese Zelle rot gekennzeichnet (CSS).
Beim Verlassen der Zelle (Enter oder Mausklick in einen anderen Bereich), wird das in der Zelle vorhandene Mini-Formular einen Submit ausführen.
In der Zelle dieser Demo ändert sich zwar nichts, aber den Erfolg der Aktion kann man an der Adresszeile des Browsers erkennen.
Die (hier per GET) gesendeten Parameter müssen nun (vermutlich in PHP oder ähnlichem Server-Side-Script) vom Server ausgewertet werden.
Es kann ein Update in der DB vorgenommen werden oder was auch immer….

Viel Erfolg…