Este artículo describe cómo JS implementa la adición dinámica, eliminación y actualización de tablas. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> operación de tabla </title>
<style type = "text/css">
cuerpo {
tamaño de fuente: 13px;
Línea de altura: 25px;
}
mesa {
Border-Top: 1px Solid #333;
Border-Bottom: 1px Solid #333;
Ancho: 300px;
}
TD {
Border-Right: 1px Solid #333;
Border-Bottom: 1px Solid #333;
}
.título {
Text-Align: Center;
Font-Weight: Bold;
Antecedentes: #ccc;
}
.centro {
Text-Align: Center;
}
#displayinfo {
Color: rojo;
}
</style>
<script type = "text/javaScript">
función addrow () {// Agregar una línea
var tableObj = document.getElementById ('myTable');
var rownums = tableObj.rows.length;
var newRow = tableObj.inserTrow (Rownums);
var col1 = newrow.insertcell (0);
col1.innerhtml = "La felicidad cae del cielo";
var col2 = newRow.insertcell (1);
col2.innerhtml = "$ 18.5";
col2.align = "centro";
var divinfo = document.getElementById ('displayInfo');
divinfo.innerhtml = "Agregar producto con éxito";
}
función delrow () {// Eliminar la segunda línea
document.getElementById ('mytable'). Deleterow (1);
var divinfo = document.getElementById ('displayInfo');
divinfo.innerhtml = "eliminar el producto con éxito";
}
función updaterow () {// Actualizar información de línea
var urow = document.getElementById ('mytable'). filas [0];
urow.classname = "título";
}
</script>
</ablo>
<Body>
<TABLE CELLPADDING = "0" CellPacing = "0" id = "mytable">
<tr id = "fila1">
<TD> Título del libro </td>
<TD> Price </td>
</tr>
<tr id = "fila2">
<TD> La habitación con vistas </td>
<TD> $ 30.00 </td>
</tr>
<tr id = "row3">
<TD> 60 momentos </td>
<TD> $ 32.00 </td>
</tr>
</table>
<input name = "b1" type = "button" value = "Agregar una línea" onClick = "javaScript: addrow ();" /> <Br />
<input name = "b2" type = "button" value = "eliminar la segunda línea" onClick = "javaScript: delrow ();" /> <Br />
<input name = "b3" type = "button" value = "modify title" onClick = "javaScript: updaterow ();" /> <Br />
<div id = "displayInfo"> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.