<table> Modifikation in Firefox 3.6

[Manfred]

Interessanter Effekt bei Firefox 3.6

Ich hab nun Firefox 3.6.2 installiert und mit Hilfe des Firebug einen interessanten Effekt gefunden.
Ein Feature meiner GPS-Webseite hat nicht mehr funkioniert, nämlich dass bei einem Klick auf einen File-Selection Button mit

<input type="file" ... onclick="add_line(...)">

nur die "add_line(...)" JavaScript-Funktion ausgeführt wird, die Datei-Auswahl Dialog-Box aber nicht aufgeht!
Die "add_line(...)" JavaScript-Funktion fügt eine weitere Eingabezeile für Dateien <input type="file" ...> hinzu, so dass weitere Dateien zum Hochladen ausgewählt werden können.
Diese Eingabezeilen stehen in einer Tabelle, so dass die Funktion "add_line(...)" jedesmal nicht nur eine Eingabezeile, sondern auch eine Zeile in der entsprechenden Tabelle hinzufügt, in der die genannte Eingabezeile dann steht.
Die Tabelle war als

<table id="upload">  
  <tr>  
    <td>  
      <input type="file" ...>  
    </td>  
  </tr>  
</table>

definiert.

Selfhtml sagt, das <tbody> kann man weglassen, wenn es nur einen body gibt.
Dementsprechend habe ich mit

document.getElementById("upload").appendChild(...<tr>-Element...);

ein vorher erzeugtes <tr>-Element, das wiederum <td> und <input...> enthält, hinzugefügt.

Das hat der Firefox 3.6.2 aber nicht mehr geschluckt, eine Fehlermeldung war der Fehlerkonsole nicht zu entlocken... :-(

Untersucht man die <table> mit dem Firebug, blendet der immer (auch wenn's nicht definiert wurde) das <tbody>-Element zwischen <table> und <tr> ein. Hab' mir nie etwas dabei gedacht, aber wenn ich dann mit JavaScript wie oben beschrieben zusätzliche Zeilen einfüge, zeigt der Firebug folgendes Konstrukt an:

<table id="upload">  
  <tbody>  
    <tr>  
      <td>  
        <input type="file" ...>  (Erste Zeile, in html implementiert)  
      </td>  
    </tr>  
  </tbody>  
  <tr>  
    <td>  
      <input type="file" ...>  (Zweite Zeile, aus JavaScript eingefügt)  
    </td>  
  </tr>  
</table>  

Die erste Zeile steckt in einem <tbody>, die zweite Zeile direkt unterhalb von <table>, daran verschluckt sich der Firefox natürlich.
Seltsam nur, dass er die Funktion ausführt, die neue Zeile auch anzeigt, aber keinen Datei-Dialog mehr öffnet...  :-(

Die Lösung besteht nun darin, die Tabelle von vorneherein sauber mit <tbody> zu definieren (auch wenn's nicht vorgeschrieben ist) und die neue Zeile unterhalb von <tbody> einzufügen:

document.getElementById("upload").firstChild.nextSibling.appendChild(...<tr>-Element...);

Bin mal gespannt, ob das im Firefox irgendwann gefixt wird...

[LX]

Tatsächlich ist das kein Fehler, sondern vielmehr das Entfernen einer übereifrigen Fehlerkorrektur. Wenn ein tbody vorhanden ist, muss dieser auch verwendet werden.

In jedem Fall sicherer ist es, von einer bestehenden Zeile auszugehen und deren parentNode zu verwenden.

Gruß, LX

[Gunnar Bittersmann]

@@Manfred:

nuqneH

Untersucht man die <table> mit dem Firebug, blendet der immer (auch wenn's nicht definiert wurde) das <tbody>-Element zwischen <table> und <tr> ein.

Oh Nostradamus ...

Qapla'

[Manfred]

nuqneH

Oh Nostradamus ...

Qapla'

:-)

Man lernt nicht aus. Bin doch froh, dass ich nicht der erste bin, der darüber gestolpert ist. Gesucht hab' ich lange genug, aber dass das was mit der Tabelle zu tun hätte, auf die Idee bin ich nicht gekommen...

Vielen Dank auch für die Tipps mit den JavaScript HTML-Elementobjekt-Referenz, war mir auch noch nicht bekannt.
Auch die Idee, das Pferd von hinten aufzuzäumen und über Parent-Objekt zu gehen scheint mir besser zu sein.

[Struppi]

Die Lösung besteht nun darin, die Tabelle von vorneherein sauber mit <tbody> zu definieren (auch wenn's nicht vorgeschrieben ist) und die neue Zeile unterhalb von <tbody> einzufügen:

document.getElementById("upload").firstChild.nextSibling.appendChild(...<tr>-Element...);

Also ob das wirklich eine vernüftige Lösung ist, wage zu bezweifeln. firstChild sieht schon jeder Browser anders, nextSibling ist dann natürlich ein reines Glücksspiel. Wenn du eine Tabelle erweitern möchtest kannst du auch <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=Tabellenmethoden und Eigenschaften> verwenden.

<table  id="upload">  
  <tr>  
    <td>  
      <input type="file" ...>  
    </td>  
  </tr>  
</table>  
<div onclick="addRow()">klick</div>  
  
<script type="text/javascript" id='functions'>  
function addRow() {  
	var t = document.getElementById('upload').tBodies[0];  
	var r = t.rows[0].cloneNode(true);  
	t.appendChild(r);  
}  
</script>  

Struppi.