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…