Löschen einer TR erzeugt eine Zwischenzeile

[romero]

hallo liebe forengemeinde,

hab wieder mal ein problem, aber eher ein darstellungsproblem.
ich hab mittels appendchild und createelement eine tabelle erzeugt, wo ich meine auflistung darstelle.soweit funktioniert es auch.

danach soll durch ein button (wenn man es drückt), die anzahl verringert werden und wenn es den wert 0 hat, die ganze zeile gelöscht werden.das macht er auch wunderbar.

nur wenn es die eine zeile halt löscht, dann macht er zwischen der vorherigen zeile und der nachfolgenden zeile eine spalte rein (schätze eine größe von 1px). hab ihm aber beim erstellen der tabelle "gesagt", dass er keine zwischenräume zu setzen hat. was mache ich falsch bzw wo liegt der fehler?

hier der javascript auszug:

		function LöschenInfileZusatz( infile_zusatz_tmp, infile_zusatz_anzahl_tmp )  
		{  
			//--> Einfügen einer neuen Tabelle bei ID = msgs für die Zusatzmatten  
  
			table = document.createElement( "table" );  
			table.className = "table2";  
			tbody = document.createElement( "tbody" );  
			tbody.id = "Tabelle";  
  
			table.appendChild( tbody );  
			document.getElementById( "msgs" ).appendChild( table );  
  
			for( var i = 0; i < infile_zusatz_tmp.length; i++ )  
			{  
				tr = document.createElement( "tr" );  
				td1 = document.createElement( "td" );  
				td2 = document.createElement( "td" );  
				td3 = document.createElement( "td" );  
				td4 = document.createElement( "td" );  
				newTDText1 = document.createTextNode( infile_zusatz_tmp[i] );  
				newTDText2 = document.createTextNode( "x" );  
				newTDText3 = document.createTextNode( infile_zusatz_anzahl_tmp[i] );  
				input = document.createElement( "input" );  
				input.type = "button";  
				input.value = "x";  
				input.className = "STL_Meldungen_Button";  
  
				document.getElementById( "Tabelle" ).appendChild( tr );  
  
				TAB = document.getElementById( "Tabelle" );  
				td11 = TAB.getElementsByTagName( "tr" )[i].appendChild( td1 );  
				td22 = TAB.getElementsByTagName( "tr" )[i].appendChild( td2 );  
				td33 = TAB.getElementsByTagName( "tr" )[i].appendChild( td3 );  
				td44 = TAB.getElementsByTagName( "tr" )[i].appendChild( td4 );  
  
				td11.width = "120";  
				td11.className = "Zusatzliste";  
				td22.width = "25";  
				td22.align = "center";  
				td22.className = "Zusatzliste";  
				td33.width = "25";  
				td33.align = "center";  
				td33.className = "Zusatzliste";  
				td33.id = i;  
				td44.width = "10";  
				td44.className = "Zusatzliste";  
  
				td11.appendChild( newTDText1 );  
				td22.appendChild( newTDText2 );  
				td33.appendChild( newTDText3 );  
				td44.appendChild( input );  
			};  
  
			var ZusatzListe = document.getElementById( "Tabelle" );  
			var ZusatzListeItems = ZusatzListe.getElementsByTagName( 'input' );  
  
			for( var i = 0; i < ZusatzListeItems.length; i++ )  
			{  
				var ZusatzListeItem = ZusatzListeItems[i];  
  
				ZusatzListeItem.onclick = function(i) {  
							return function() {  
										infile_zusatz_anzahl_tmp.splice( i, 1, (infile_zusatz_anzahl_tmp[i]-1) );  
										var newTDText = infile_zusatz_anzahl_tmp[i];  
  
										//alert( infile_zusatz_anzahl_tmp[i] + ' // ' + i + ' // ' + ZusatzListeItems.length );  
  
										document.getElementById( i ).firstChild.replaceData( 0, document.getElementById( i ).firstChild.nodeValue.length, newTDText );  
  
										if( infile_zusatz_anzahl_tmp[i] == 0 )  
										{  
											while( TAB.getElementsByTagName( "tr" )[i].childNodes.length > 0 )  
											{  
												TAB.getElementsByTagName( "tr" )[i].removeChild( TAB.getElementsByTagName( "tr" )[i].firstChild );  
											};  
										};  
									};  
								}(i);  
			};  
		};

heri wird die tabelle erstellt und die anzahl mittels button-drücken gelöscht.

und hier sind die css-anweisungen dazu:

		.table2 { border-spacing:0; border-collapse:collapse; margin-top:0px; border:1px solid black }  
		.ZusatzListe { border:1px solid black; vertical-align:middle; margin-top:0px; border-collapse:collapse }

ich hoffe ihr könnt nun was damit anfangen.

ps: kann mir einer sagen, wie ich eine testseite für euch erstelle?damit ihr sehen könnt wo ich welches problem habe? wäre dankbar.

lg romero

[Cheatah]

Hi,

nur wenn es die eine zeile halt löscht,

nichts in Deinem Script löscht eine Tabellenzeile.

Cheatah

[romero]

Hi,

nur wenn es die eine zeile halt löscht,

nichts in Deinem Script löscht eine Tabellenzeile.

Cheatah

nö?
und was hat das hier zusagen?

TAB.getElementsByTagName( "tr" )[i].removeChild( TAB.getElementsByTagName( "tr" )[i].firstChild );

remove heißt doch kindknoten löschen oder?und ich hab doch vorher mittels appendchild doch diese kindknoten erstellt, welche ich nun lösche.

oder hab ich was nicht verstanden?

lg romero

[MudGuard]

Hi,

und was hat das hier zusagen?
TAB.getElementsByTagName( "tr" )[i].removeChild( TAB.getElementsByTagName( "tr" )[i].firstChild );

Es wird das erste Kind aus einer tr gelöscht, aber keine tr.

Das erste Kind ist (von korrektem HTML ausgehend) entweder ein Textknoten mit whitespace oder ein td oder ein th.

remove heißt doch kindknoten löschen oder?und ich hab doch vorher mittels appendchild doch diese kindknoten erstellt, welche ich nun lösche.

Du löschst einen Kindknoten der tr - aber eben keine Tabellenzeile (tr).

oder hab ich was nicht verstanden?

Sieht so aus: Du scheinst davon auszugehen, daß das Kind einer Tabellenzeile eine Tabellenzeile sei.

cu,
Andreas

[romero]

stimmt, ja klar.war jetzt mein fehler.

aber wie kann ich nun diese tr löschen?

hab es so versucht:

document.getElementById( "Tabelle" )[i].removeChild( document.getElementById( "Tabelle" )[i].firstChild );

aber da bringt er mir nur, das document.getElementById( ... )[...]. null oder kein objekt sei.

tabelle ist sozusagen die id zu tbody also dem kopf der tabelle und da wo alle tr's angehangen sind.

lg romero

[ChrisB]

Hi,

document.getElementById( "Tabelle" )[i].removeChild( document.getElementById( "Tabelle" )[i].firstChild );

aber da bringt er mir nur, das document.getElementById( ... )[...]. null oder kein objekt sei.

Höchstvermutlich weil du mit firstChild auf etwas anderes zugreifst, als du glaubst.

Du hast doch bereits die Referenz auf die Tabellenzeile, die du entfernen willst, vorliegen - also warum benutzt du die dann nicht einfach?

tabellenZeile.parentNode.removeChild(tabellenZelle);

So brauchst du dir überhaupt keine Gedanken darum zu machen, welches Element jetzt das Elternelement ist, aus dem du die Zeile entfernen willst - wer sein Elter ist, dass weiß das Element selber nämlich am besten.

MfG ChrisB

[romero]

tabellenZeile.parentNode.removeChild(tabellenZelle);

was ist denn bei dir die tabellenzeile?bzw was soll sie bei mir sein?

lg romero

[ChrisB]

Hi,

tabellenZeile.parentNode.removeChild(tabellenZelle);

was ist denn bei dir die tabellenzeile?

tabellenZeile enthält in diesem Beispiel, wie ich schon schrieb, eine Referenz auf die Tabellenzeile, die du löschen möchtest.

bzw was soll sie bei mir sein?

Solltest du nicht wenigstens das selber wissen ...?

Du hast doch in deinem Script schon versucht, die Kindelemente der Tabellenzeile zu löschen - und dabei hast du schon eine Referenz auf diese Zeile benutzt.

Verflixt noch mal, es kann doch nicht wahr sein, dass du immer noch so wenig weißt, was du eigentlich tust ...?

MfG ChrisB

[romero]

Verflixt noch mal, es kann doch nicht wahr sein, dass du immer noch so wenig weißt, was du eigentlich tust ...?

MfG ChrisB

ich weiß schon was ich tue, das ist ja da schlimme ;)

aber jetzt hab ich's, danke. war nur etwas irritiert wegen deinem ausdruck tabellenzeile, deswegen.

klappt nämlich super, danke.

hab nun das problem, wenn mein "i" größer ist als die tatsächliche anzahl der "tr's", das es dann zu komplikationen kommt. aber das krieg ich auch noch hin :)

nochmals vielen dank

lg romero

[ChrisB]

Hi,

hab nun das problem, wenn mein "i" größer ist als die tatsächliche anzahl der "tr's", das es dann zu komplikationen kommt.

NodeLists, wie bspw. getElementsByTagName liefert, sind per Definition “live”, d.h. sie spiegeln jede Änderung im DOM sofort wieder.

Und wenn sich Änderungen auf den Umfang der NodeList auswirken, weil man Elemente löscht, dann hat man schnell ein Problem, wenn man diese vom ersten bis zum letzten Element durchlaufen will. Einfacher, primitiver Workaround - nicht vom ersten bis zum letzten Element durchlaufen, sondern andersherum vom letzten bis zum ersten.

MfG ChrisB

[Cheatah]

Hi,

to tell the truth:

RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

It fits on a #DECAFF background. You'll totally see who's drinking such a dishwater.

Cheatah, SCNR

[romero]

Und wenn sich Änderungen auf den Umfang der NodeList auswirken, weil man Elemente löscht, dann hat man schnell ein Problem, wenn man diese vom ersten bis zum letzten Element durchlaufen will. Einfacher, primitiver Workaround - nicht vom ersten bis zum letzten Element durchlaufen, sondern andersherum vom letzten bis zum ersten.

aber wie bau ich diese schleife um, so dass diese funcktionalität erhalten bleibt?

hab es so versucht (auch unter google nix passendes gefunden):

			for( var i = ZusatzListeItems.length; i > 0; i-- )  
			{  
				var ZusatzListeItem = ZusatzListeItems[i];  
  
				ZusatzListeItem.onclick = function(i) {  
							return function() {  
										infile_zusatz_anzahl_tmp.splice( i, 1, (infile_zusatz_anzahl_tmp[i]-1) );  
										var newTDText = infile_zusatz_anzahl_tmp[i];  
  
										//alert( infile_zusatz_anzahl_tmp[i] + ' // ' + i + ' // ' + ZusatzListeItems.length );  
  
										document.getElementById( i ).firstChild.replaceData( 0, document.getElementById( i ).firstChild.nodeValue.length, newTDText );  
  
										if( infile_zusatz_anzahl_tmp[i] == 0 )  
										{  
											//while( TAB.getElementsByTagName( "tr" )[i].childNodes.length > 0 )  
											//{  
											//	TAB.getElementsByTagName( "tr" )[i].removeChild( TAB.getElementsByTagName( "tr" )[i].firstChild );  
											//};  
  
											TAB.getElementsByTagName( "tr" )[i].parentNode.removeChild( TAB.getElementsByTagName( "tr" )[i] );  
										};  
									};  
								}(i);  
			};

aber da ist ZusatzListeItem 'undefined'.

denn "i" soll ja die gesamtlänge von ZusatzListeItems sein, also aller "input's". dann muss i zurück auf 0 laufen und i-- zählt ja rückwärts oder?

nur wie gesagt, mit dieser variante macht er nix.

wie lasse ich also diese schleife rückwärts laufen?

lg romero

[Beat]

for( var i = ZusatzListeItems.length; i > 0; i-- ){}

aber da ist ZusatzListeItem 'undefined'.

Ja richtig: Weil ein Array n Elemente hat aber die Array-Indizes von 0 bin n-1 lauten.

mfg Beat

[romero]

habs anderser gelöst.

da es mir ja um die darstellung ging, hab ich den einfachsten weg gewählt und die zeilen wo die anzahl 0 ist, einfach ausgeblendet.

und erst im nächsten schritt werde ich die tr's mit 0 löschen.

damit bleibt die jetzige funktionalität erhalten und ich umgehe damit weiteren komplikationen.

[peter]

Hi,

der index geht von 0 bis length-1 (nicht von 1 bis length).

ZusatzListeItems[ZusatzListeItems.length] muß also undefined sein.

gruß
peter

[peter]

Hi,

tabellenZeile.parentNode.removeChild(tabellenZelle);

sollte das nicht eigentlich so lauten:

tabellenZeile.parentNode.removeChild(tabellenZeile);
???

Es soll ja die Zeile aus ihrem parentNode gelöscht werden und nicht eine ZELLE !

gruß
peter

[ChrisB]

Hi,

tabellenZeile.parentNode.removeChild(tabellenZelle);

sollte das nicht eigentlich so lauten:

tabellenZeile.parentNode.removeChild(tabellenZeile);
???

Es soll ja die Zeile aus ihrem parentNode gelöscht werden und nicht eine ZELLE !

Ja - Tippfehler.

MfG ChrisB

[peter]

Hi,

Ja - Tippfehler.

...dacht ich mir.
Könnt beim OP evtl. für etwas Verwirrung gesorgt haben.

Viele Grüße und schönen Abend (Nacht) noch.
peter

[Der Martin]

Hallo,

for( var i = 0; i < ZusatzListeItems.length; i++ )
{
   [...]
   document.getElementById( i ).firstChild.replaceData( 0, document.getElementById( i ).firstChild.nodeValue.length, newTDText );

das kann nie und nimmer funktionieren, wenn wir von korrektem HTML ausgehen. Hier ist i nur eine Zahl, aber eine ID darf nie mit einer Ziffer beginnen.

ps: kann mir einer sagen, wie ich eine testseite für euch erstelle?damit ihr sehen könnt wo ich welches problem habe? wäre dankbar.

Die Frage verstehe ich nicht. Erstelle ein aufs Wesentliche reduziertes, valides Beispiel und lade es auf deinen Webspace hoch. Wo liegt dein Problem dabei?

Ciao,
 Martin

[ChrisB]

Hi,

document.getElementById( i ).firstChild....

das kann nie und nimmer funktionieren, wenn wir von korrektem HTML ausgehen.

Doch, das kann - wenn wir von HTML5 ausgehen ;-)

MfG ChrisB

[MudGuard]

Hi,

das kann nie und nimmer funktionieren, wenn wir von korrektem HTML ausgehen.
Doch, das kann - wenn wir von HTML5 ausgehen ;-)

Er ging aber von _korrektem_ HTML aus, nicht von HTML5 ;-)

cu,
Andreas

[romero]

Hallo,

for( var i = 0; i < ZusatzListeItems.length; i++ )
{
   [...]
   document.getElementById( i ).firstChild.replaceData( 0, document.getElementById( i ).firstChild.nodeValue.length, newTDText );

das kann nie und nimmer funktionieren, wenn wir von korrektem HTML ausgehen. Hier ist i nur eine Zahl, aber eine ID darf nie mit einer Ziffer beginnen.

es funzt aber. mein script liegt als eine *hta-datei vor.
mag sein, dass an eingigen stellen man was umschreiben kann bzw. es anders macht, damit es sauberer ist. aber es dient lediglich als anwendung für mich bzw noch paar anderen leuten, also nicht was ich in irgendeinerweise online stelle.

ihr seit profis, ich nicht. aber für mich soll es funktionieren, reibungslos aber funzen. und da bin ich froh, dass ich schon so weit vorran gekommen bin, auch dank eurer hilfen.

mag sein, dass es viele wege gibt, die nach rom führen (wie man so schön sagt), aber das ist einer, welchen ich sogar verstehe und das schöne ist, dass es auch noch klappt.

ps: kann mir einer sagen, wie ich eine testseite für euch erstelle?damit ihr sehen könnt wo ich welches problem habe? wäre dankbar.

Die Frage verstehe ich nicht. Erstelle ein aufs Wesentliche reduziertes, valides Beispiel und lade es auf deinen Webspace hoch. Wo liegt dein Problem dabei?

ja und genau das ist mein problem. ich hab das ding auf arbeit und hab da keine möglichkeit sowas zu machen. und wenn ich von zu hause es mache, weiß ich nicht wie, also so das ihr es auch so seht wie ich. denn hab da nicht die laufwerke, die benötigt werden und auch die dateien nicht. deswegen ist das ja etwas umständlich. würde es aber echt gern euch zeigen. nur es ist da etwas schwieriger als gedacht. wenn ich mal soweit bin, zeig ich es euch, versprochen.

lg romero

[Struppi]

danach soll durch ein button (wenn man es drückt), die anzahl verringert werden und wenn es den wert 0 hat, die ganze zeile gelöscht werden.

Warum benutzt du nicht deleteRow()?

Struppi.