So erstellen Sie eine Tabelle in Javascript (zwei Möglichkeiten, eine Tabelle in Javascript zu zeichnen)

Autor：Eve Cole Aktualisierungszeit：2025-01-28 04:00:02

1. Funktionen insertRow() und insertCell()

Die Funktion insertRow() kann Parameter in der folgenden Form annehmen:

insertRow(index): Index beginnt bei 0

Diese Funktion fügt eine neue Zeile vor der Indexzeile hinzu, z. B. insertRow(0), die eine neue Zeile vor der ersten Zeile hinzufügt. Die Standardfunktion insertRow() entspricht insertRow(-1), die am Ende der Tabelle eine neue Zeile hinzufügt. Im Allgemeinen verwenden wir: objTable.insertRow(objTable.rows.length). Es dient dazu, eine neue Zeile am Ende der Tabelle objTable hinzuzufügen.

Die Verwendung von insertCell() und insertRow ist dieselbe und wird hier nicht besprochen.

2. Methoden deleteRow() und deleteCell()

Die Funktion deleteRow() kann Parameter annehmen, die Form ist wie folgt: deleteRow(index): Index beginnt bei 0

Die gleiche Bedeutung wie bei den beiden oben genannten Methoden besteht darin, die Zeilen und Zellen an der angegebenen Position zu löschen. Zu übergebende Parameter: Index ist die Position der Zeile in der Tabelle, die mit der folgenden Methode abgerufen und gelöscht werden kann:

Kopieren Sie den Codecode wie folgt:

var row=document.getElementById("row's Id");

var index=row.rowIndex;//Es gibt dieses Attribut, hehe

objTable.deleteRow(index);

Lassen Sie mich Ihnen von einem Problem erzählen, auf das ich beim Löschen von Zeilen in einer Tabelle gestoßen bin. Wenn Sie eine bestimmte Zeile löschen, ändert sich sofort die Anzahl der Zeilen in der Tabelle Code ist falsch:

Kopieren Sie den Codecode wie folgt:

Funktion clearRow(){

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

Dieser Code möchte den Tabellenkörper der Originaltabelle löschen. Es gibt zwei Probleme. Erstens kann es nicht deleteRow(i) sein, es sollte deleteRow(1) sein. Denn beim Löschen von Tabellenzeilen ändert sich die Anzahl der Zeilen in der Tabelle. Die Zeilenlänge wird immer kleiner und die Anzahl der gelöschten Zeilen wird daher immer geringer sein , löschen Sie die Tabelle korrekt. Die Codezeile sollte wie folgt aussehen:

Kopieren Sie den Codecode wie folgt:

Funktion clearRow(){

objTable= document.getElementById("myTable");

var length= objTable.rows.length;

for(var i=1; i<Länge; i++)

{

objTable.deleteRow(i);

}

3. Legen Sie die Eigenschaften von Zellen und Zeilen dynamisch fest

A. Verwenden Sie die Methode setAttribute() mit dem folgenden Format: setAttribute(attribute, attribute value)

Hinweis: Diese Methode kann für fast alle DOM-Objekte verwendet werden. Der erste Parameter ist der Name des Attributs, zum Beispiel: border, und der zweite Parameter ist der Wert, den Sie für border festlegen möchten, zum Beispiel: 1

Kopieren Sie den Codecode wie folgt:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//Setzen Sie den Rahmen für die Tabelle auf 1

Für andere Zwecke, beispielsweise wenn Sie die Höhe eines TD festlegen möchten, müssen Sie zunächst auch das TD-Objekt abrufen und dann die Methode setAttribute () verwenden.

Kopieren Sie den Codecode wie folgt:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//Setzen Sie die Höhe der Zelle auf 24

Bei der Verwendung ist ein Problem beim Festlegen von Stilen aufgetreten. Sie können stattdessen setAttribute("className",inputbox2") verwenden. Haha, ich denke, andere haben das gleiche Problem , einige Die Attribute stimmen nicht mit dem überein, was wir in DW haben, haha, lassen Sie uns das selbst erkunden.

B. Direkte Zuordnung

Kopieren Sie den Codecode wie folgt:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//Setzen Sie den Rahmen für die Tabelle auf 1

Diese Methode ist auch auf alle anwendbar, haha.

4. Erstellen Sie eine Tabelle

Sobald Sie das Hinzufügen und Löschen von Zeilen <tr> und Zellen <td> verstanden haben, können Sie eine Tabelle erstellen.

Schritt 1: Sie benötigen eine Tabelle, die Sie dynamisch ändern möchten. Ich spreche hier von einer Tabelle, die bereits auf der Seite vorhanden ist. Wir müssen eine ID festlegen: myTable.

Kopieren Sie den Codecode wie folgt:

var objMyTable = document.getElementById("myTable");

Schritt 2: Erstellen Sie Zeilen- und Spaltenobjekte

Kopieren Sie den Codecode wie folgt:

var index = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//Die hinzuzufügenden Zeilen werden von der vorletzten bis zur letzten Zeile hinzugefügt.

//Zellenfachnummer

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

Das ist alles, Sie können einfach eine Zeile und eine Spalte erstellen. Ich habe den spezifischen Code unten gepostet. Es ist nur ein sehr einfaches Beispiel, aber die Methode ist wahrscheinlich die oben beschriebene. Lassen Sie uns das langsam erkunden

Kopieren Sie den Codecode wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Kopf>

<title>Blu-ray-BlueShine</title>

var Count=false,NO=1;

Funktion addRow(){

Count=!Count;

//Eine Zeile hinzufügen

var newTr = testTbl.insertRow(testTbl.rows.length);

//Zwei Spalten hinzufügen

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//Spalteninhalt und Attribute festlegen

if(Count){newTr.style.background="#FFE1FF";}

sonst {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

NEIN++

newTd1.innerText="Zeile "+ NO+";

}

</script>

</head>

<Körper>

<td>Zeile 1</td>

</tr>

</table>

</label>

</body>

</html>

5. appendChild()-Methode

Kopieren Sie den Codecode wie folgt:

<html>

<Kopf>

<title>Meine Testseite</title>

<!--

var textNumber = 1;

Funktion addTextBox(form, afterElement) {

// Erhöhe die Textfeldnummer

textNumber++;

//Erstelle das Etikett

var label = document.createElement("label");

//Erstelle das Textfeld

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Den Text des Labels hinzufügen

label.appendChild(document.createTextNode("Textfeld #"+textNumber+": "));

// Das Textfeld hineinlegen

label.appendChild(textField);

// Alles zum Formular hinzufügen

form.insertBefore(label,afterElement);

return false;

}

Funktion removeTextBox(form) {

if (textNumber > 1) { // Wenn mehr als ein Textfeld vorhanden ist

// Das zuletzt hinzugefügte entfernen

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

Etikett {

Anzeige:Block;

Rand: .25em 0em;

}

</style>

</head>

<Körper>

<label>Textfeld Nr. 1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>

<html>

<Kopf>

<title>Meine Testseite</title>

<!--

var textNumber = 1;

Funktion addTextBox(form, afterElement) {

// Erhöhe die Textfeldnummer

textNumber++;

//Erstelle das Etikett

var label = document.createElement("label");

//Erstelle das Textfeld

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Den Text des Labels hinzufügen

label.appendChild(document.createTextNode("Textfeld #"+textNumber+": "));

// Das Textfeld hineinlegen

label.appendChild(textField);

// Alles zum Formular hinzufügen

form.insertBefore(label,afterElement);

return false;

}

Funktion removeTextBox(form) {

if (textNumber > 1) { // Wenn mehr als ein Textfeld vorhanden ist

// Das zuletzt hinzugefügte entfernen

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

Etikett {

Anzeige:Block;

Rand: .25em 0em;

}

</style>

</head>

<Körper>

<label>Textfeld Nr. 1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>