Niko: Firefox: Offset beim verschieben von Zeilen (tr)

Hallo Forum,

Ich habe folgendes Problem und hoffe ihr könnt mir helfen!

Ich habe eine kleine JavaScript-Klasse geschrieben, bei der ich eine Tabelle erzeuge, welcher ich dann Zeilen hinzufügen oder entfernen und sie nach bestimmten Kriterien sortieren lassen kann. Das alles läuft über DOM.

Sowohl auf IE, als auch auf Opera funktioniert es prächtig, nur Firefox macht Probleme:
Wenn ich  eine Zeile hinzufüge, entferne oder verschiebe wird beim Firefox über dieser Zeile komischerweise ein Rand angezeigt! Firebug bezeichnet diesen Rand als Offset, aber eine Style-Eigenschaft 'offset' gibt es soweit ich weiß nicht, bzw. das setzten dieser bringt leider nichts. Das merkwürdige ist, dass dieser Rand größer wird, je öfter ich etwas verändere!

Die Frage ist: Wie kann ich diesen Rand wieder entfernen bzw. gleich verhindern, dass er überhaupt entsteht?

Das Einfügen funktioniert bei mir mit tabelle.appendChild(zeile), das löschen mit tabelle.removeChild(zeile) und das verschieben mit insertBefore(). Die Tabelle ist eine normale HTML-Tabelle, also mit table, tr und td (nicht mit divs oä.)

MfG

  1. Hi,

    Das Einfügen funktioniert bei mir mit tabelle.appendChild(zeile), das löschen mit tabelle.removeChild(zeile) und das verschieben mit insertBefore(). Die Tabelle ist eine normale HTML-Tabelle, also mit table, tr und td (nicht mit divs oä.)

    und das Objekt tabelle referenziert ein <table>- oder ein <tbody>-Element?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. und das Objekt tabelle referenziert ein <table>- oder ein <tbody>-Element?

      Der Name legt nahe, dass 'tabelle' das 'table'-Element-Objekt ist. Eine Tabellenzeile 'tr' ist aber in HTML aber NIEMALS Kindelement des 'table'-Elements, sondern Kind von 'tbody' oder 'thead' oder 'tfoot'.

      Hallo ihr beiden,

      danke erstmal für die Antworten! Ich hatte natürlich blöderweise das table-Element genommen! Damit hat sich dieses Problem erstmal erledigt, allerdings hat sich auch ein neues aufgetan (auch auf die Gefahr hin, dass es wieder ein blöder Fehler ist^^):

      Wenn ich jetzt eine neue Zeile einfüge, bei der ich mittels td.setAttribute() die Breite ändern möchte scheint diese Anweisung irgendwie ignoriert zu werden bzw. sie hat keine Auswirkung! Die Tabellen werden so angezeigt wie als hätte ich kein width-Attribut gesetzt! Im DOM-Baum von Firebug stehen sie aber eindeutig drin!

      MfG Niko

      1. Wenn ich jetzt eine neue Zeile einfüge, bei der ich mittels td.setAttribute() die Breite ändern möchte scheint diese Anweisung irgendwie ignoriert zu werden bzw. sie hat keine Auswirkung! Die Tabellen werden so angezeigt wie als hätte ich kein width-Attribut gesetzt! Im DOM-Baum von Firebug stehen sie aber eindeutig drin!

        Hat sich erledigt! Habe zwar meines Erachtens nichts geändert, aber plötzlich funktioniert es! ^^ Vlt hatte er noch ne ältere Javascript-Datei im Cache oder was weiß ich!

        Schönen Abend noch!

        MfG Niko

        1. Also ich raff das nicht! Manchmal werden die width-Attribute berücksichtigt und manchmal nicht! Um mal etwas weiter auszuholen:

          Ich hab eine Klasse FlexTable, welche beim erzeugen auch eine Tabelle (DOM-Objekt) erzeugt. Diese kann man dann eben wie jedes DOM-Objekt irgendwo einhängen.
          Weiterhin hat die Klasse FlexTable ne Methode namens addRow(options), die eine neue Zeile hinzufügt, wobei options ein objekt mit allen Eigenschaften ist, die ich gerne in die neue Zeile schreiben möchte.
          Außerdem gibt es eine Methode clear(), die einfach alle Zeilen löscht!

          Mein Quelltext:

          var daten = Json.evaluate(daten);  //daten sind aus einer AJAX-Anfrage, Json ist ne Mootools-Klasse
          table.clear();  //Löscht alle Zeilen aus der Tabelle
          for(var i=1; i<=daten[0].rows; i++)
          {
              table.addRow({ //Fügt eine neue Zeile in die Tabelle ein
              cols: [
                  {value:' + '},
                  {value: daten[i].name},
                  {value: 'Show'},
                  {value: 'Edit'},
                  {value: 'Delete'}],
              options: daten[i]
              });
          }

          Das Merkwürdige: Wenn ich mittels Firebug einen Breakpoint beim Anfang der for-Schleife setze, dann werden die width-Attribute ignoriert. Wenn ich dies nicht tue und das Script ohne Unterbrechung durchlaufen lasse werden sie berücksichtigt! (Die width-Attribute wurden schon vorher für jede Spalte eingestellt und jetzt für jede Zelle übernommen!). Außerdem ist mir aufgefallen, dass die width-Attribute nicht berücksichtigt werden, wenn die Tabelle von vornherein leer ist! Wird sie allerdings erst in dieser Funktion geleert und direkt danach wieder mit neuen Zeilen gefüllt werden die width-Attribute berücksichtigt!

          Vielleicht hat einer ne Idee, warum das so ist!

          MfG Niko

  2. @@Niko:

    Das Einfügen funktioniert bei mir mit tabelle.appendChild(zeile),

    So eben nicht!!

    Der Name legt nahe, dass 'tabelle' das 'table'-Element-Objekt ist. Eine Tabellenzeile 'tr' ist aber in HTML aber NIEMALS Kindelement des 'table'-Elements, sondern Kind von 'tbody' oder 'thead' oder 'tfoot'.

    Suche nach "Nostradamus" im Archiv!

    Live long and prosper,
    Gunnar

    --
    Flughafen in Tempelhof
    findet jeder Hempel doof.
    1. Hi,

      Suche nach "Nostradamus" im Archiv!

      Womit hauptsächlich Deine Hinweise "Suche nach Nostradamus im Archiv" gefunden werden ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.