Beispiel einer DOM-Operationstabelle (DOM erstellt Tabelle)

<tableborder="1"width="300">
<caption>Mitarbeiterliste</caption>
<Kopf>
<tr>
<th>Name</th>
<th>Geschlecht</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zhang San</td>
<td>Männlich</td>
<td>20</td>
</tr>
<tr>
<td>Li Si</td>
<td>Weiblich</td>
<td>22</td>
</tr>
</tbody>
<tfuß>
<tr>
<tdcolspan="3">Gesamt: N</td>
</tr>
</tfoot>
</Tabelle>

<Skript>
fenster.onload = funktion(){
vartable = document.createElement("Tabelle");
//Attribute zur Tabelle hinzufügen
table.width=300;//Sie können auch diese Methode verwenden: table.setAttribute('width',300)
table.border=1;</p> <p>//Erstellen Sie einen Tabellentitel
varcaption = document.createElement("Beschriftung");
table.appendChild(caption);</p> <p>//Inhalt zum Tabellentitel hinzufügen
//caption.innerHTML="Personaltabelle"; //Nicht W3C-Standardmethode
varcaptionText=document.createTextNode("Personaltabelle");
Beschriftung.UntergeordnetesAnhängen(Beschriftungstext);</p> <p>
//Erstellen Sie die erste Zeile der Tabelle, die eine Kopfzeile ist
varthead=document.createElement("thead");
Tabelle.AnhängenUntergeordnetesElement(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//Spalte
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="Daten";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="Daten";</p> <p>document.body.appendChild(Tabelle);
};
</Skript>

fenster.onload = funktion(){
vartable=document.getElementsByTagName("Tabelle")[0];
Alarm (Tabelle.Kinder[0].innerHTML);
};

fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenreferenz abrufen
//Gemäß HTMLDOM, um die <caption> der Tabelle zu erhalten
alert(table.caption.innerHTML); //Den Inhalt der Beschriftung abrufen
//table.caption.innerHTML="Student Table"; //Sie können den Wert auch festlegen
};

fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenreferenz abrufen
//Gemäß HTMLDOM erhalten Sie die Kopf- und Fußzeile der Tabelle <thead>, <tfoot>
alert(table.tHead); //Tabellenüberschrift abrufen
alert(table.tFoot); //Fußzeile der Tabelle abrufen</p> <p> //Laut HTMLDOM den Tabellentext abrufen<tbody>
alert(table.tBodies); //Sammlung der Tabellenkörper abrufen
};

fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenreferenz abrufen
//Gemäß HTMLDOM die Anzahl der Zeilen in der Tabelle ermitteln
alert(table.rows.length); //Ermittelt die Anzahl der Zeilen im Tabellenkörper gemäß HTMLDOM
alert(table.tBodies[0].rows.length); //Die Anzahl der Zeilen im Textkörper abrufen
};

fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenreferenz abrufen</p> <p> //Gemäß HTMLDOM die Anzahl der Zellen in der ersten Zeile des Tabellenkörpers abrufen (tr)
alert(table.tBodies[0].rows[0].cells.length); //Anzahl der Zellen in der ersten Zeile abrufen
};

fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenreferenz abrufen</p> <p> //Gemäß HTMLDOM den Inhalt der ersten Zelle in der ersten Zeile des Tabellenkörpers abrufen (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //Holen Sie sich den Inhalt der ersten Zelle in der ersten Zeile
};

<Skript>
fenster.onload = funktion(){
//Verwenden Sie HTMLDOM, um Tabellenelemente abzurufen
vartable = document.getElementsByTagName('table')[0]; //Tabellenverweis abrufen</p> <p> //Löschen Sie gemäß HTMLDOM Titel, Kopfzeile, Fußzeile, Zeile und Zelle
//table.deleteCaption(); //Titel löschen
//table.deleteTHead(); //löschen <thead>
//table.tBodies[0].deleteRow(0);//Lösche eine Zeile von <tr>
//table.tBodies[0].rows[0].deleteCell(0); //Lösche eine Zelle von <td>
//table.tBodies[0].rows[0].deleteCell(1); //Lösche den Inhalt einer Zelle, was dem Löschen einer Zelle entspricht, und das Folgende wird hoffentlich ausgefüllt
};
</Skript>

fenster.onload = funktion(){
//Erstellen Sie eine Tabelle gemäß HTMLDOM
vartable = document.createElement('Tabelle');
Tabelle.Rahmen=1;
table.width=300;</p> <p>table.createCaption().innerHTML='Mitarbeitertabelle';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead(); //Diese Methode gibt eine Referenz zurück
vartr=thead.insertRow(0);//Diese Methode gibt eine Referenz zurück</p> <p>vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//Eine Möglichkeit zum Hinzufügen von Daten, Sie können auch die folgende Methode verwenden
td.innerHTML="Daten";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data 2'));
td2.innerHTML="Daten 2";</p> <p>document.body.appendChild(Tabelle);
};Beim Erstellen einer Tabelle gibt es keine spezielle Methode für <table>, <tbody> und <th>. Sie müssen ein Dokument verwenden, um sie zu erstellen. Sie können auch vorhandene Methoden simulieren und spezifische Funktionen schreiben, wie zum Beispiel insertTH().