nicht angemeldet
Hallo,
nachfolgend die dynamische Erzeugung einer Tabelle per JavaScript für das HTML-DOM des Internet Explorers.
Gruss Tom
Tabelle erzeugen: nur per DOM-Funktionen
var X00=document.createElement('TABLE');
var TabellenZeiger=document.body.appendChild(X00);
Tabellenelemente erzeugen: Es gibt 2 Varianten
Elemente der Tabelle können sein (Tagnamen)
TR Zeile bestehend aus optionalen Spalten (TD)
TD Spalte in einer Zeile (TR)
COLGROUP Gruppierte Spalten (TD)
kann keine TD enthalten, da sonst unwirksam
Besonderheit beim codieren in HTML Beispiel:
<TABLE BORDER="2" RULES="groups">
<COLGROUP SPAN="2" STYLE="color:red"></COLGROUP>
<COLGROUP STYLE="color:blue"></COLGROUP>
<TR>
<TD>Zeile 1 This column is in the first group.</TD>
<TD>Zeile 1 This column is in the first group.</TD>
<TD>Zeile 1 This column is in the second group.</TD>
</TR>
<TR>
<TD>Zeile 2 This column is in the first group.</TD>
<TD>Zeile 2 This column is in the first group.</TD>
<TD>Zeile 2 This column is in the second group.</TD>
</TR>
<TABLE>
erste COLGROUP hat 2 Spalten (TD)
zweite COLGROUP hat unbekannte Zahl von Spalten (TD)
Der Browser ordnet die erste 2 TD der jeweiligen TR der ersten COLGROUP zu
alle anderen TD der jeweiligen TR der zweiten COLGROUP zu
Tabelle muss IMMER bereits erzeugt worden sein per DOM
var X00=document.createElement('TABLE');
var TabellenZeiger=document.body.appendChild(X00);
Variante 1 per TABLE-Objekt-Funktionen (keine DOM-Funktionen) (siehe auch unten) als effektivste Variante
Tabellenelement erzeugen am Beispiel TR
oTR = TabellenZeiger.insertRow(); // automatisch append
Variante 2 per DOM uund Objekte THEAD, TBODY, TFOOT, CAPTION als sehr umständliche Variante
Diese Objekte erzeugen Beispiel für TBODY
var X00=document.createElement('TBODY');
var TBODYObjekt=TabellenZeiger.appendChild(X00);
Tabelle darf mehrere TBODY haben
TD und TR erzeugen am Beispiel für TR im TBODY
var X00=document.createElement('TR');
var TRObjekt=TBODYObjekt.appendChild(X00);
THEAD darf enthalten TR (auch mehrere) und damit auch TD
TBODY darf enthalten TR (auch mehrere) und damit auch TD
mehrere TBODY pro Tabelle zulässig
TFOOT darf enthalten TR (auch mehrere) und damit auch TD
CAPTION Titel der Tabelle standardgemäß über dem Tabellenbeginn
Positionierung per .valign='top'; // Standard
.valign='bottom';
mehr gibts nicht
Funktionen der Erzeugung von Tabellenelementen per Table-Objekt-Funktionen Variante 1
-------------------------------------------------------------------------------------
sind keine DOM-Funktionen
es gibt keine Funktion für COLGROUP
id_head=id_table.createTHead(); liefert Zeiger auf TH oder null
mehrere TH erzeugbar
id_table.deleteTHead(); zuletzt erzeugten TH löschen, liefert nichts
es gibt keine Index da keine Collection verfügbar (ausser document.all)
id_TR=id_table.insertRow([iRowIndex]); liefert Zeiger auf TR oder null
iIndex -1 Standard für append an rows-Collection zur Tabelle
wenn >=0 so Element an aktueller Indexpos in Collection rows eingebaut
Achtung: Index sollte lückenlos sein wegen Konsistenz des Objektes
id_table.deleteRow([iRowIndex]); löscht TR
iRowIndex Index ab 0 des TR in rows-Collection zu Tabelle
Standard letzte TR in rows-Collection
id_TD=id_TR.insertCell([iCellsIndex]); liefert Zeiger auf TD oder null
iIndex -1 Standard für append an cells-Collection zum TR
wenn >=0 so Element an aktueller Indexpos in Collection cells eingebaut
Achtung: Index sollte lückenlos sein wegen Konsistenz des Objektes
id_TR.deleteCell([iCellsIndex]); löscht TD
iCellsIndex Index ab 0 des TD in cells-Collection
Standard letzte TD in cells-Collection zu TR
id_TFoot=id_table.createTFoot(); liefert Zeiger auf Foot oder nul
mehrere Foot erzeugbar
id_tabelle.deleteTFoot(); zuletzt erzeugten Foot löschen, liefert nichts
es gibt keine Index da keine Collection verfügbar (ausser document.all)
id_Caption=id_table.createCaption(); liefert Zeiger auf Caption oder nul
mehrere erzeugbar aber nur die ERSTE Caption lsöchbar !
id_table.deleteCaption(); löscht NUR ZUERST erzeugtes Caption
es gibt keine Index da keine Collection verfügbar (ausser document.all)
für Indexe siehe unten Collectionen
Tipp: Zeigerfeld aufbauen zur Tabelle Beispiel:
// +++++ Datenfelder indexsynchron und identische Länge
var X00=new Array
(true, // 1. TR, 1. Element MUSS TR sein
false,false,false, // alle TD der 1. TR
true, // 2. TR
true, // 3. TR
false // alle TD der 3. TR
);
var X00a=new Array // .innerHTML
('', // 1. TR kein Inhalt da .innerText und .innerHTLM nicht belegbar
'a','b','c', // alle TD der 1. TR
'',
'',
'<B>d</B>' // alle TD der 3. TR
);
// +++++ Zeigerfeld der Tabellenelemente erzeugen
var X01=new Array();
// +++++ Tabelle erzeugen per DOM
var X02=document.createElement('TABLE');
var X03=document.body.appendChild(X02);
// +++++ Caption erzeugen
var X99=X03.createCaption();
X99.innerHTML='<B>Tabellenkopf</B>';
// X00.valign='top' oder 'bottom' funktioniert nicht, immer 'top' automatisch also über Tabelle
// innerHTML-Breite per Schrift beeinfluss Tabellenbreite beim rendern !
// +++++ Tabellenelemente erzeugen
var X04=0;
var X05=X00.length; // Lange von X00 und X00a
var X06=false; // Feldelement aus X00
var X07=-1; // Index TR, muss -1 sein
var X08=-1; // Index TD in TR, muss -1 sein
for(X04=0;X04<X05;X04++) // Datenfelder abklappern
{X06=X00[X04]; // Flag auf TD bzw. TR
if(X06) // TR
{X07++; // nächstes TR einstellen
X01[X07]=X03.insertRow(); // TR in Tabelle einfügen
X08=-1; // init Index TD
}
else // TD zum aktuellen TR
{X08++; // nächstes TD einstellen
X01[X07][X08]=X01[X07].insertCell();
X01[X07][X08].innerHTML=X00a[X04];
}
}
.innerText und .innerHTML
-------------------------
TR-Objekt nur lesbar
TD-Objekt lesen und schreiben
Collectionen zu Tabellenelementen TR und TD
-------------------------------------------
Tabelle hat Collection row aller TR der Tabelle id_tabelle.rows
tBodies aller TBODY der Tabelle id_tabelle.tBodies
jede TR hat eigene Collection cells aller TD zum TR id_TR.cells
Collectionen haben Eigenschaft .length
werden gefüllt in Reihenfolge der Erzeugung der Tebellenelemente
id_objekt.sourceIndex liefert Index ab 0 aus Collection document.all (nur lesen)
id-Objekt TD, TR, TH, Tbody, TFoot, Caption
TR und TD haben folgende Eigenschaften bezüglich zugehöriger Collection:
liefern Index des Objektes in Collection (nur lesen, Index ab 0)
id_TR.rowIndex liefert Index ab 0 aus row-Collection der Tabelle
id_TD.cellIndex liefert Index ab 0 aus cells-Collection des zugehörigen TR-Objektes