Ich werde vorerst nicht über die CSS -Kontrolle über den Tisch sprechen. Zunächst werde ich die häufig verwendeten DOMs in der folgenden Tabelle teilen.
Die häufig verwendeten Methoden zum Hinzufügen von Tabellenoperationen sind Insertrow () und InsertCell () -Methoden.
Die Zeile wird beispielsweise von Null berechnet:
Kopieren Sie den Code wie folgt: var otr = document.getElementById ("Mitglied"). Insertrow (2)
Es bedeutet, der zweiten Zeile eine neue Zeile hinzuzufügen.
Die Codekopie lautet wie folgt:
var text = new Array ();
Atetext [0] = document.CreateTextNode ("frischeggs");
text [1] = document.createTextNode ("w610");
Atext [2] = document.CreateTextNode ("5. November");
Atetext [3] = document.CreateTextNode ("scorpio");
Atext [4] = document.CreateTextNode ("1038818");
für (var i = 0; i <atext.length; i ++) {
var otd = otr.insertcell (i);
OTD.AppendChild (Atetext [i]);
}
Die Variable OTR fügt eine neue Zeile für die Tabelle ein. Anschließend fügt InsertCell neue Daten für diese Zeile ein, erstellt CreateTextNode, um einen neuen Textknoten zu erstellen, und gibt sie an OTD in appendChild, und OTD ist die neue Zelle.
1. Einlegen Sie eine Zeile (dynamische Hinzufügen von Tabelle)
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var otr = document.getElementById ("Mitglied"). Insertrow (2); // eine Linie einfügen
var text = new Array ();
Atetext [0] = document.CreateTextNode ("frischeggs");
text [1] = document.createTextNode ("w610");
Atext [2] = document.CreateTextNode ("5. November");
Atetext [3] = document.CreateTextNode ("scorpio");
Atext [4] = document.CreateTextNode ("1038818");
für (var i = 0; i <atext.length; i ++) {
var otd = otr.insertcell (i);
OTD.AppendChild (Atetext [i]);
}
}
</script>
<Table Summary = "Liste der Mitglieder in EE Sunday" ID = "Mitglied">
<Caption> Mitgliedsliste </caption>
<tr>
<Th Scope = "col"> Name </th>
<Th scope = "col"> Klasse </th>
<Th Scope = "col"> Geburtstag </th>
<Th scope = "col"> Constellation </th>
<Th Scope = "col"> Mobile </th>
</tr>
<tr>
<td> isaac </td>
<td> w13 </td>
<td> 24. Juni </td>
<td> Krebs </td>
<td> 1118159 </td>
</tr>
<tr>
<td> Girlwing </td>
<td> W210 </td>
<td> 16. September </td>
<td> jungfräulich </td>
<td> 1307994 </td>
</tr>
<tr>
<td> Tastestory </td>
<td> W15 </td>
<td> 29. November </td>
<td> Sagittarius </td>
<td> 1095245 </td>
</tr>
</table>
2. Ändern Sie den Inhalt der Tabelle
Nachdem die Tabelle erstellt wurde, können Sie HTMLDOM direkt verwenden, um die Tabelle zu bedienen, die bequemer als document.getElementById () und document.GetElementsByTagName ().
otable.rows [i] .cell [j]
Das obige kann durch die beiden Attribute Zeilen und Zellen (beide von 0 gezählt) leicht auf die Zeile- und J-te-Spalte der Tabelle zugreifen. Nachdem Sie das Zellobjekt erhalten haben, können Sie das Innerhtml -Attribut verwenden, um den Inhalt von Xiangyu zu ändern.
Ändern Sie beispielsweise den Inhalt von 4 Zeilen und 5 Spalten, um gut zu sein
Dann können Sie den folgenden Code verwenden
Die Codekopie lautet wie folgt:
var otable = document.getElementById ("Tabelle1");
otable.rows [4] .Cells [5] .ernnerhtml = "Good";
3. Löschen Sie den Tischinhalt
Da die Tabelle die Funktion hat, sie hinzuzufügen, zu ändern und zu löschen.
Das Löschen von Zeilen in der Tabelle verwendet die Methode der Deleterow (I), wobei ich die Zeilennummer ist.
Das Löschen von Spalten in der Tabelle verwendet die Methode DeleteCell (J) von TR.
Der folgende Code zeigt die zweite Zeile der gelöschten Tabelle und die zweite Spalte der dritten Zeile der Originaltabelle an
Die Codekopie lautet wie folgt: var otable = document.getElementById ("Tabelle1"); otable.deleterow [2]; otable.rows [2] .deleteCell [3];
Der folgende Code zeigt an, dass, wenn die zweite Zeile der Tabelle gelöscht wird und die zweite Spalte der dritten Zeile der ursprünglichen Tabelle eine dynamische Löschung aufweist und nicht das Gesamt -HTML -Framework beeinflusst oder wenn der Tabelleninhalt viel ist, dynamische Löschung und Addition können angewendet werden.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var otr = document.getElementById ("Mitglied"). Insertrow (2); // eine Linie einfügen
var text = new Array ();
Atetext [0] = document.CreateTextNode ("frischeggs");
text [1] = document.createTextNode ("w610");
Atext [2] = document.CreateTextNode ("5. November");
Atetext [3] = document.CreateTextNode ("scorpio");
Atext [4] = document.CreateTextNode ("1038818");
für (var i = 0; i <atext.length; i ++) {
var otd = otr.insertcell (i);
OTD.AppendChild (Atetext [i]);
}
}
</script>
<Table Summary = "Liste der Mitglieder in EE Sunday" ID = "Mitglied">
<Caption> Mitgliedsliste </caption>
<tr>
<Th Scope = "col"> Name </th>
<Th scope = "col"> Klasse </th>
<Th Scope = "col"> Geburtstag </th>
<Th scope = "col"> Constellation </th>
<Th Scope = "col"> Mobile </th>
</tr>
<tr>
<td> isaac </td>
<td> w13 </td>
<td> 24. Juni </td>
<td> Krebs </td>
<td> 1118159 </td>
</tr>
<tr>
<td> Girlwing </td>
<td> W210 </td>
<td> 16. September </td>
<td> jungfräulich </td>
<td> 1307994 </td>
</tr>
<tr>
<td> Tastestory </td>
<td> W15 </td>
<td> 29. November </td>
<td> Sagittarius </td>
<td> 1095245 </td>
</tr>
</table>
Spalten löschen
Die Codekopie lautet wie folgt:
Funktion DeleteColumn (ootable, Inum) {
// Anpassen der Spaltenlöschfunktion, dh die entsprechende Zelle für jede Zeile löschen
für (var i = 0; i <otable.rows.length; i ++)
otable.rows [i] .deleteCell (Inum);
}
window.onload = function () {
var otable = document.getElementById ("Tabelle1");
DeleteColumn (ootable, 2);
}
Zum Löschen von Tabellenspalten gibt es in der DOM keine direkt aufrufbare Methode. Sie müssen die Methode DeleteColumn () selbst schreiben. Diese Methode akzeptiert zwei Parameter, ein Parameter ist das Tabellenobjekt, und der andere Parameter ist die Spaltennummer, die Sie löschen möchten. Die Schreibmethode ist sehr einfach. Mit der Methode deletecell () führt jede Zeile die entsprechende Methode zum Löschen von Zellen aus.