jQuery Tutorial – Teil 1 – Tabelle dynamisch erweitern

Ich bin vor kurzem auf folgendes Problem gestossen:
Es existiert eine ganz normale HTML-Tabelle mit Daten.
Dort soll nun per jQuery das Ergebnis aus einem HTML-Fragment sozusagen injiziert werden.

Wir haben also folgende Beispiel-Tabelle:

<table width="50%" class="jquery_table">
<tr class="expand_region">
<td class="plus_minus">+</td>
<td> 01</td>
        <td> 02</td>
        <td> 03</td>
        <td> 04</td>
        <td> 05</td>                                        
    </tr>
    <tr>
        <td> 10</td>
        <td> 11</td>
        <td> 12</td>
        <td> 13</td>
        <td> 14</td>
        <td> 15</td>                                        
    </tr>    
  </table>  

Um diese mit dem Ergebnis aus dem Fragment zu befüllen (und zwar zwischen den beiden bestehenden TRs) kommt folgender kurzer Code zum Einsatz.
Als erstes das jQuery-Framework einbinden:
[geshi lang=javascript][/geshi]
Hier ist der eigentliche Code:

$(document).ready(function() {
    $(".plus_minus").click(function() {
    if($(".plus_minus").text() == "+"){
        $(".plus_minus").text("-");
        $.get("append.html", "html", function(data){ 
        $(".expand_region").after(data);
        });    
    } else {
        $(".plus_minus").text("+");
        $(".dynamic").remove();
    }
    });
});

Was genau passiert hier?
Zunächst einmal wird gewartet, bis das komplette HTML-Document gerendert wurde.
Anschliessend wird dem Element mit der Klasse „plus_minus“ ein click-Ereignis hinzugefügt.
Wenn der Text dieses Elements „+“ lautet, dann wird der Text zunächst in ein „-“ umgewandelt.
Per GET-Methode wird das HTML aus der Datei „append.html“ geholt und die Callback-Methode mit den Daten aufgerufen.
Dem Element mit der Klasse „expand_region“ (hier die erste TR) wird mit der Methode after() der Inhalt von „append.html“ an die TR angehängt.

Ansonsten, wenn also die Daten bereits anhängen und aus dem „+“ ein „-“ wurde, dann wird das Element mit der Klasse „dynamic“ (hier: die TR, die in append.html steht) mit der Methode remove() entfernt.
Hinweis: Wenn man das mit mehreren Fragmenten implementiert, so würden mit diesem Code alle injizierten Elemente entfernt.

Wenn man also nur ein bestimmtes injiziertes Fragment entfernen möchte, so müsste man auf IDs setzen oder entsprechende Klassen definieren. Je nach Zweck und belieben.

Um noch ein besseres gefühl für das hier beschriebene zu geben, noch 2 Links:
Online Demo
Beispiel im ZIP-Archiv




Ein Kommentar

Als ich das erste jQuery-Tutorial veröffentlichte wollte ich meinen Lesern natürlich auch die Möglichkeit bieten, den Quelltext mit Syntax-Highlighting zur Verfügung zu stellen. Ich wählte damals das dp.SyntaxHighlighter-Plugin. Das sieht zwar nett aus u