In diesem Artikel wird beschrieben, wie JS dynamische Addition, Löschung und Aktualisierung von Tabellen implementiert. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Tabelle Operation </title>
<style type = "text/css">
Körper {
Schriftgröße: 13px;
Zeilenhöhe: 25px;
}
Tisch {
Grenze: 1PX Feststoff #333;
Grenzboden: 1PX Solid #333;
Breite: 300px;
}
td {
Grenzrechte: 1PX Solid #333;
Grenzboden: 1PX Solid #333;
}
.Title {
Text-Align: Mitte;
Schriftgewicht: fett;
Hintergrund: #CCC;
}
.Center {
Text-Align: Mitte;
}
#DisplayInfo {
Farbe: Rot;
}
</style>
<script type = "text/javaScript">
Funktion addrow () {// eine Zeile hinzufügen
var tableObj = document.getElementById ('mytable');
var rownums = tableObj.rows.length;
var newrow = tableObj.insertrow (Rownums);
var col1 = newrow.insertcell (0);
col1.innerhtml = "Glück fällt vom Himmel";
var col2 = newrow.insertcell (1);
Col2.Innerhtml = "$ 18,5";
Col2.Align = "Center";
var divinfo = document.getElementById ('displayInfo');
Divinfo.innerhtml = "Produkt erfolgreich hinzufügen";
}
Funktion delrow () {// die zweite Zeile löschen
document.getElementById ('mytable'). Deleterow (1);
var divinfo = document.getElementById ('displayInfo');
Divinfo.innerhtml = "Das Produkt erfolgreich löschen";
}
Funktion updaterow () {// Zeileninformationen aktualisieren
var urrow = document.getElementById ('mytable'). Zeilen [0];
urow.classname = "title";
}
</script>
</head>
<body>
<Table CellPadding = "0" cellpacing = "0" id = "mytable">
<tr id = "row1">
<Td> Buchtitel </td>
<td> Preis </td>
</tr>
<tr id = "row2">
<td> Der Raum mit Aussicht </td>
<td> $ 30.00 </td>
</tr>
<tr id = "row3">
<td> 60 Momente </td>
<td> $ 32.00 </td>
</tr>
</table>
<input name = "b1" type = "button" value = "eine Zeile hinzufügen" onclick = "JavaScript: addrow ();" /> <br />
<input name = "b2" type = "button" value = "Die zweite Zeile" onclick = "JavaScript: delRow ();" /> <br />
<input name = "b3" type = "button" value = "title" onclick = "javaScript: updaterow ();" /> <br />
<div id = "displayInfo"> </div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.