Postback bei klick auf einzelne Zelle

Guten Tag,

ich habe mir eine Tabelle erstellt, welche wie ein Koordiantensystem funktionieren soll. nun würde ich dieses gerne als interaktives Element nutzen. Gibt es Möglichkeiten, dass jede Zelle bei einem OnClick ein Postback liefert?

Meine Überlegung momentan ist, in jeder Zelle einen Button zu generieren und es über diesen zu lösen, das erscheint mir aber etwas zu umständlich.

Über Google bin ich bisher nur über Lösungen mit AJAX gestolpert das möchte ich aber gerne vermeiden.

Bin dankbar für Anregungen und Vorschläge.

Gruß David

Hallo,

na anders wird es nicht werden. Du wirst um einen Postback auszlösen einen Button, einen ImageButton oder Link nehmen müssen.

einer Celle (<td></td>) kann man diese Funktionalität nicht mit geben.

Oder eben per JavaScript und OnMouseClick o.ä. wobei man das auch wieder keiner Celle zu weisen kann (soweit ich weis).

Ergo: zb einen Link jede Celle, und in den Link den egl. Cellen-Inhalt.

Mit jQuery kannst Du allem einen Event hinzufügen, auch einer Zelle.

$('td').live('click', function() {

var currentCell = $(this);

});

Der Ansatz mit einem Button (mit entsprechendem Style sieht man nicht, dass es ein Button ist) und einem einmaligen Value-Wert, den man Server-seitig auswerten kann, wird man womöglich am performantesten und einfachsten fahren.

jQuery klingt erstmal gut. Ich werde es mal testen und wenn es zu starke Performanceeinbrüche gibt, werde ich auf Links oder Buttons umsteigen.

Vielen Dank für die Ideen 🙂

Mit jQuery kannst Du allem einen Event hinzufügen, auch einer Zelle.

Wie funzt das im Detail? Ich meine wie bekommt die currentCell ("var currentCell = $(this);")? Oder anders: wie kann man dann hinterher die Celle von einer andern unterscheiden, wenn ein td-Tag kein id-Attribut hat?

MfG

Tilton

Das macht jQuery für Dich.
$(this) ist bei einem Event (besser gesagt innerhalb einer Funktion) unter jQuery immer das aktuelle Element, von dem der Event ausgelöst wurde. Willst Du eine spezifisches Element, dann musst Du dieses natürlich mit der ID (oder anderen eindeutigen Infos) suchen.

Mit folgendem Snippet kannst Du sehr einfach und relativ performant zB die aktuelle Zelle, die mit der Maus überfahren wird, einfärben (die entsprechende CSS Klasse natürlich vorausgesetzt). Für solch eine Illustration wird natürlich keine ID benötigt.

$('td').live('mouseover', function()
{
    $(this).addClass('active');
});

$('td').live('mouseout', function()
{
    $(this).removeClass('active');
});

Willst Du zum Beispiel alle Zellen aktivieren, so gibts zwei Möglichkeiten. Ersteres will ich zeigen, um das $(this) noch mal einzusetzen.

$.each('td', function(index, value) {
   $(this).addClass('active');
});

oder eben die bessere Variante

  $('td').addClass('active');

Das gehört aber zu den Grundlagen von jQuery 😉