Tabellenkopf clonen

Chysm · 4. Juni 2010

Hallo zusammen,

wie der Titel sagt, habe ich ein kleines Problem beim Clonen eines Tabellenkopfes in einem XHTML-Dokument.

Bei Tabellen die größer bzw. länger sind als eine volle Seite soll beim nach unten Scrollen der Tabellenkopf mit wandern.
Das klappt soweit auch ganz gut, nur werden die Spaltenbreiten der Ausgangstabelle nicht übernommen und dadurch ist ein unschöner Versatz das Resultat.

Die Spaltenbreite setzte ich nach dem Clonen wie folgt:

Code:

for (var i_row = 0; i_row < Math.min(this.FixedRowCount, this.SourceTable.rows.length); i_row++) {
   
    ot_cell = this.SourceTable.rows[i_row].firstChild;
    ft_cell = this.FloatingTable.rows[i_row].firstChild;
      while (ot_cell != null) {
	// Check for element node
	if (ot_cell.nodeType == 1) {
                              .........
                               ft_cell.setAttribute("width", ot_cell.offsetWidth);
	}; // if
			
	ot_cell = ot_cell.nextSibling;
	ft_cell = ft_cell.nextSibling;
       }; // while
}; // for

Dabei ist mir aufgefallen, das die offsetwidth der Quellzelle immer 0 ist.

Zuerst hatte ich die Methode beim onload="" im Body-Tag ausgeführt, danach auch auf einen Button gelegt, weil ich dachte das das Dokument zu dem Zeitpunkt noch nicht gerendert
ist und deshalb die OffsetWidth stets 0 ist, aber auch dies brachte keine Änderung.

Habt ihr evtl. einen Vorschlag bzw. einen Lösungsweg?

hela · 4. Juni 2010

Hallo,
so würde es bei mir funktionieren:

Code:

<html>
  <head><title>Tabellentest</title></head>
  <body>

    <table id="scrollTable">
      <thead>
        <tr>
          <th>Spalte_1</th>
          <th>Spalte_2</th>
          <th>Spalte_3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
          <td>consetetur sadipscing elitr</td>
          <td>sed diam nonumy eirmod tempor invidunt</td>
        </tr>
<!-- usw. usf. -->
      </tbody>
    </table>

    <p>
      <a href="#" onclick="alert(getElementById('scrollTable').tHead.rows[0].cells[0].offsetWidth);">
        Breite der 1. Spalte
      </a>
    </p>

  </body>
</html>

Einzelheiten zum Tabellenobjekt findet man hier (w3schools).

Chef_De_Loup · 9. Juni 2010

Womoeglich ist das Objekt this.SourceTable.rows[i_row].firstChild; so nicht gueltig.

Versuch doch mal die Sache in einer for Schleife zu machen.

Code:

for (var i=0; i<this.SourceTable.rows[i_row].cells.length; i++){
        ot_cell = this.SourceTable.rows[i_row].cells[i];
        ft_cell = this.FloatingTable.rows[i_row].cells[i];
        if (ot_cell.nodeType == 1) { // wieder unklar ob Node-Attribute darauf direkt anwendbar sind
                              .........
                               ft_cell.setAttribute("width", ot_cell.offsetWidth);
	}; // if

}

hela · 9. Juni 2010

Chef_De_Loup hat gesagt.:

Code:

for (var i=0; i<this.SourceTable.rows[i_row].cells.length; i++){
        ot_cell = this.SourceTable.rows[i_row].cells[i];
        ft_cell = this.FloatingTable.rows[i_row].cells[i];
        if (ot_cell.nodeType == 1) { // wieder unklar ob Node-Attribute darauf direkt anwendbar sind
                              .........
                               ft_cell.setAttribute("width", ot_cell.offsetWidth);
    }; // if
}

Hallo,
wenn ot_cell so zusammengestellt wird, dann muss man keine Knotentypen mehr aussortieren!

Tabellenkopf clonen

Chysm

hela

Chef_De_Loup

Mitglied

hela

Neue Beiträge