Class eines dynamisch erstellten Tags auslesen

[Bicko]

Hi,

Ich arbeite mich gerade in jQuery ein und muss sagen das es mir wirklich gut gefaellt, obwohl es schon sehr tricky sein kann, das Ganze zu durchschauen. Ich habe mich nun an einer Sache festgebissen und bin seit 2 Tagen dabei eine Loesung zu finden.

Ich habe mehrere dynamisch erstellte Input Fields. Nun moechte ich das wenn man auf ein Input Field klickt, die komplete Reihe (2 Input Fields in 1 <tr>) geloescht wird.

Mein tr ist natuerlich auch dynamisch hinzugefuegt, doch wie bekomme ich dann den Class Namen, wenn es dynamisch erstellt wurde?
<tr class="row'+current+'">

Ich habe gelesen, dass man dem dynamisch erstellten Part ein Click Event (oder Handler) hinzufuegen muss. Doch weiss ich ehrlich gesagt gar nicht ob ich dies dem tr, den td oder label oder doch input tag hinzufuegen muss und wenn ich das gemacht habe, dann weiss ich immer noch nicht, wie ich dann die class der <tr> rausbekomme...

Ich hoffe Ihr versteht mein Problem. Hat jemand eine Idee? Vielen Dank im Voraus.

Gruss Bicko

 

[Sven Mintel]

Moin,

es wäre gut, wenn du posten könntest, wie du das alles dynamisch erstellst, um sehen zu Können, wo man das click() am Besten hinzufügt und wie man an die gesuchte <tr> kommt.

 

[Bicko]

Hi,

Klar. Hier ist der Part fuer die Beiden erstellten td Tags. Ich hoffe das ist gut geloest, zumindestens scheint es zu funtionieren.

if (col < 2)
{
  textToInsert1 = '<tr class="row'+current+'"><td>
  <label for="hometeam"'+current+'">Home</label> 
  <input id="hometeam'+current+'" name="HomeTeamID['+current+']"
  value="'+TeamID+'" />
  <input id="HomeTeam'+current+'" name="HomeTeam['+current+']" value="'+team+'"/>
  </td>'

  $("#tbl > tbody").append(textToInsert1);
  col++;
  $(this).remove();
}

else{
  textToInsert2 = '<td>
  <label for="guestteam"'+current+'">Guest</label>
  <input id="guestteam'+current+'" name="GuestTeamID['+current+']"
  value="'+TeamID+'" />
  <input id="GuestTeam'+current+'" name="GuestTeam['+current+']" 
  value="'+team+'" />
  </td>'
  $('.row'+current).append(textToInsert2);
  col--;
  current++;
  $(this).remove();
}

 

[CPoly]

So könntest du es machen (ungetestet).

//Ich füge die neuen Elemente nicht einfach als String ein, sondern erzeuge aus ihnen vorher ein jquery Objekt
var tabellenZelle = $('<td></td>');
    
var inputElemente = $('<label for="hometeam"'+current+'">Home</label> 
    <input id="hometeam'+current+'" name="HomeTeamID['+current+']" value="'+TeamID+'" />
    <input id="HomeTeam'+current+'" name="HomeTeam['+current+']" value="'+team+'"/>');

tabellenZelle.append(inputElemente);

//Da wir in "inputElemente" noch die Referenz halten, können wir irgendwo im Code das Event anbringen

inputElemente.click(function() {
    //löscht das Elternelement (td) und damit auch label, input und input
    $(this).parent().remove();
});

$("#tbl > tbody").append(tabellenZelle);
col++;
$(this).remove();

 

[Bicko]

Hallo,

Super, das hat geklappt. Vielen Dank. Ich habe nur noch meine <tr> mit eingefuegt, da ich ja immer nur 2 <td> pro Reihe haben will.

 var tabellenZelle = $('<tr class="row'+current+'"><td></td>');

Aber ehrlich gesagt, gibt es jetzt nicht ein Problem wenn ich wissen will, was in den jeweiligen 2 input fields gestanden hat? Jetzt wird ja <tr> mit all seinen Inhalten, also auf den 2 <td> incl. dem input dort geloescht. Aber ich muesste dann ja jetzt die geloeschten wieder oben in meiner Liste anzeigen, damit sie erneut ausgewaehlt werden koennten. Komme ic da auf diesem Weg ueberhaupt noch ran?

Boh, ziemlich verzwickt...

 

[CPoly]

Ich weiß ehrlich gesagt gar nicht, wozu das überhaupt dient. Aber du kannst doch bevor du die Sachen löschst, irgendwas damit machen.

inputElemente.click(function() {
    //löscht das Elternelement (td) und damit auch label, input und input
    var tr = $(this).parent();
    //Beispiels Zugriff
    alert(tr.find("input").val());
    tr.remove();
});

Und noch was:
Du scheinst ja in einer Schleife die Tabelle aufzubauen. Anstatt bei jedem Durchlauf in der Schleife zu prüfen, ob du bereits zwei Elemente in der Zeile hast, kannst du die Schleife auch einfach direkt in Zweierschritten laufen lassen. Ist dann vielleicht etwas übersichtlicher. Muss man nur aufpassen, falls es nicht durch zwei teilbar ist.

for(var i=0;i<arr.length;i+=2) {
    //direkt die ganze Tabellenzeile aufbauen
    var tr = $("<tr><td></td><td></td></tr>");
    tr.find("td:first").append(...);
    tr.find("td:last").append(...);
}

 

[Bicko]

Ok, die Info's muss ich erstmal verarbeiten. Das tr.find("input").val() ist schonmal genial, aber ich muss darauf aufbauend jetzt etwas finden was fuer mein script passt, den ich habe ja 2 td und insgesamt 4 input fields, da es 2 hidden input fields gibt mit der TeamID
Dies ist nun mein Ansatz und komischer Weise bekomme ich den Wert vom 2. Input Feld der 2. Tabellenzelle, doch bei wert 1 steht undefined. Irgendwie verstehe ich das nicht ganz..

 wert1 = tr.find("td:eq(0) input:eq(1)").val();
 wert2 = tr.find("td:eq(1) input:eq(1)").val();

Ueber Deinen 2. Hinweis muss ich noch nachdenken, ob das so klappen kann. Die Tabelle wird ja erst erstellt wenn ich auf einen Wert meiner Liste klicke. Dann kommt eine Tabellenspalte und erst wenn ich auf einen 2. Listenwert klick kommt die naechste Spalte, dann wird tr geschlossen und neuer tr aufgemacht wenn ein weiterer Klick erfolgt ist.

 

[CPoly]

So?

wert1 = tr.find("input[type=hidden]:eq(0)").val();
wert2 = tr.find("input[type=hidden]:eq(1)").val();

In deinem zweiten Post müsste dann aber noch das tr geschlossen werden, sonst erzeugst du ungültiges xml.

 

[Bicko]

Hi,

Nein, da bekomme ich dann 2 mal undefined.

es soll ja eigentlich so aussehen:

<table id="tbl">
<tbody>
<tr class="row0">
<td><input type="hidden" value="12" name="TeamID">
<input type="text" value="team abc" name="Team"></td>
<td><input type="hidden" value="13" name="TeamID">
<input type="text" value="team def" name="Team"></td>
</tr>
<tr class="row1">
<td><input type="hidden" value="14" name="TeamID">
<input type="text" value="team ghi" name="Team"></td>
<td><input type="hidden" value="15" name="TeamID">
<input type="text" value="team jkl" name="Team"></td>
</tr>

Habe jetzt aber im Firebug festgestellt das ich

<tr class="row0"><td></td><input..... ><td><input></td>

Dann ist es natuerlich klar... das td wird sofort wieder zugemacht, bevor ich ueberhaupt mein erstes input field reingeschrieben habe. Habe das </td> hinter das <input> gesetzt, aber das klappt auch nicht. Na ja, zumindestens weiss ich jetzt warum es nicht geht.