✔ Probleme mit inserRow() / deletRow Index bei einer Tabelle

Mik3e

Mik3e

Erfahrenes Mitglied
Hi zusammen,

Ich erstelle dynamisch Zeilen in einer Tabelle mit der insertRow() Methode.
Sieht ungefähr so aus:

Code: 
	/* Anlegen der neuen Zeile in der Tabelle */
	multiMediaLibraryTable = window.opener.document.getElementById('multiMediaLibraryTable');
	fileIndex=window.opener.document.getElementById('multiMediaLibrary[totalFiles]').value;
	
	new_row = multiMediaLibraryTable.insertRow(1); /* Unterhalb der Header Zeile einfügen */
	new_row.id=fileID;
	
	/* Anlegen der Spalte "Bezeichnung" */
	new_cell_FileDescription = new_row.insertCell(0);
	new_cell_FileDescription.innerHTML='<input type="text" name="multiMediaLibrary[fileID]['+fileIndex+']" id="multiMediaLibrary[fileID]['+fileIndex+']" value="'+fileID+'"><input type="text" name="multiMediaLibrary[description]['+fileIndex+']" id="multiMediaLibrary[description]['+fileIndex+']" value="'+fileDescription+'" style="width:250px; font-weight:bold;">';
	new_cell_FileDescription.className="tabListeLeft1";

Wie man sieht, weise ich der neuen Zeile eine eindeutige ID mit new_row.id=fileID zu (die fileID ist ein eindeutiger Schlüsselwert).

Nun hat jede Zeile einen Link (ist hier nicht angeführt), der eine Funktion zum Löschen dieser Zeile aufruft. Ich dachte mir, dass ich die die Zeile über die ID anspreche und anschließend mit cellindex() den Indexwert erhalte und die Zeile dann mit deleteRow(IndexWert) lösche.

Mein Problem dabei: Ich kömme nicht an den Indexwert ran (ist immer undefined resp. NULL).

Hier ist die Funktion zum Löschen einer Zeile. Über den Parameter elementID übergebe ich die ID der Zeile:
Code: 
/* Delete Row aus Multimediabibliothek
-------------------------------------------------------------*/
function removeFile(elementID) {
	alert("remove:"+elementID); // Liefert die korrekte ZeilenID
	alert("cellIndex:"+document.getElementById(elementID).cellIndex); // Liefert NULL
	document.getElementById("multiMediaLibraryTable").deleteRow(document.getElementById(elementID).cellIndex);
}
Ich baue schon den ganzen Tag rum und komme zu keiner eleganten (oder zumindest funktionellen) Lösung....

Könnt Ihr mir vielleicht dabie helfen?

Danke & Ciao,
Mike
 
Ich mach das idR. so...

du hast einen Link , und die dazugehörige <tr> soll gelöscht werden...arbeite über die Knotenstruktur:

angenommen der Link ist ein direktes Child der <td>, dann kannst du die <tr> vom Link aus ansprechen per this.parentNode.parentNode

Du könntest also also die rows-Auflistung der Tabelle durchgehen, mit this.parentNode.parentNode vergleichen, und wenn beides identisch ist, wendest du deleteRow() an(den Index hast du beim durchgehen der Auflistung ja verfügbar)
 
Hi,

Danke, ist eine gute Idee mit Parent...
Allerdings habe ich gerade gelesen, dass verschiedene Browser .cellIndex() nicht korrekt oder gar nicht interpretieren...

Ciao,
Mike
 
den cellIndex brauchst du nicht...wenn du alle tr in einer Schleife durchgehst, und einen Zähler mitlaufen lässt, hast du ja den Index über den Zähler...

Bsp.:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function delete_row(obj)
{
  tr=obj.parentNode.parentNode;
  tb=tr.parentNode.parentNode;
  for(r=0;r<tb.rows.length;++r)
    {
      if(tb.rows[r]==tr)
        {
          tb.deleteRow(r);return;
        }
    }
}
//-->
</script>
<style type="text/css">
<!--
u{cursor:pointer;}
-->
</style>
</head>
<body>
<table border="1">
 <tr><td>#1</td><td><u onclick="delete_row(this)">l&ouml;schen</u></td></tr>
 <tr><td>#2</td><td><u onclick="delete_row(this)">l&ouml;schen</u></td></tr>
 <tr><td>#3</td><td><u onclick="delete_row(this)">l&ouml;schen</u></td></tr>
 <tr><td>#4</td><td><u onclick="delete_row(this)">l&ouml;schen</u></td></tr>
 <tr><td>#5</td><td><u onclick="delete_row(this)">l&ouml;schen</u></td></tr>
</table>
</body>
</html>
 
Schönen Feiertag Sven :)

Hab mich jetzt an Deinen Vorschlag mit parent() gehalten... Funktioniert prima.
Nun habe ich noch eine Funktion geschrieben, die mir am Ende der Tabelle einfach eine neue Zeile einfügt. Funktioniert auch ganz prima, nur habe ich derzeit ein Problem mit der Angabe des Index.

Auszugsweise sieht das so aus:

HTML: 
table=document.getElementById(tablename);
next_index=table.rows.length+1;
new_row = table.insertRow(next_index);

Geht leider so nicht... Ihn stört, dass ich den Index bei insertRow(INDEX) als Variable angebe. Füge ich hier zB eine "0" ein, klappts wunderbar. Ich vermute es ist ein Typecasting-Problem (sofern man das in JS so nennen darf). Obwohl ich mir das nicht ganz erklären kann (.length müsste ja einen INT zurückliefern bzw. die Additon ein automatic Typecasting erzwingen, oder?)

Habe leider auch keine Information zur Typumwandlung in JS auf selfhtml gefunden..
Hast Du noch diesen letzten Tipp für mich? Dann bin ich vermutlich wunschlos glücklich :)

Ciao,
Mike
 
Moin..:-)

Es ist eher ein Logik-Fehler:

Du darfst da nicht 1 dazuzählen, denn da der rows-Array bei 0 beginnt, gelangst du mit dessen length-Eigenschaft bereits an dessen Ende.

Wenn du jetzt noch 1 dazuzählst, meckert JS, weil da ein <tr> fehlt...

also einfach
Code: 
table=document.getElementById(tablename);
new_row = table.insertRow(table.rows.length);
 
Ähm...peinlicher Fehler :)
Naja, darf ja auch nach 12 Jahren noch passieren, oder :-)
Danke jedenfalls,
Ciao,
Mike
 
Weißt Du was ich nicht verstehe:

Wenn ich folgenden Link zum löschen verwende:
<a href="javascript:delete_row(this);">l&ouml;schen</a>
klappts nicht (Fehler: obj.parentNode has no properties).

Dieser allerdings funktioniert:
<a onclick="delete_row(this);">l&ouml;schen</a>

Deutet für mich auf ein Problem mit der Hierarchie hin.. verstehe ich aber nicht, da sich ja nur an den attributen etwas ändert und nicht an den Knoten!?

Hast Du eine Idee was ihn bei Variante A stört? Würde ich lieber verwenden, da ich somit nicht wieder an den styles rumbauen muss..

Ciao,
Mike
 
Hi,

versuch es mal so:
HTML: 
<a href="#" onclick="delete_row(this); return false;">l&ouml;schen</a>

So umgehst du ebenfalls das "Rumbauen an den Styles".

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück