1. Cargar tablas dinámicamente
1. Primero configure la identificación para la posición agregada de la tabla en html
Es decir, escriba una etiqueta div dentro de la etiqueta del cuerpo de html para indicar que la tabla se agregará dentro de este div. como sigue
<div id="tdl"><div>
2. Escribe la declaración para agregar la tabla en javascript.
Si está en el archivo html actual, está escrito dentro de la etiqueta <script>, como por ejemplo
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //La tabla agregada aquí se puede crear según sus propias necesidades
</script>
Si importa un archivo js, escriba la siguiente declaración directamente en el archivo js (suponiendo que sea test.js)
Copie el código de código de la siguiente manera:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
Luego introduce tu propio archivo html.
Copie el código de código de la siguiente manera:
<script tipo="text/javascript" src="test.js"></script>
2. Agregue filas de tabla dinámicamente
1. Primero establezca la identificación para la posición de adición de la fila de la tabla en HTML. Esta posición debe estar dentro de <tbody> (no es particularmente preciso, pero llegué a esta conclusión según mi prueba. Si tiene otros métodos, deje un mensaje. , gracias), de la siguiente manera
Copie el código de código de la siguiente manera:
<tabla>
<cabeza></cabeza>
<tfoot><tfoot> //tfoot y thead se usan junto con tbody, pero cuando estaba escribiendo, estaba bien no usarlos.
<tbody id="filas"></tbody>
</tabla>
[/s/S ]*/n
2. En el contenido de JavaScript, primero debe crear filas y celdas, y luego agregar filas en <.tbody>, de la siguiente manera
[código]
fila=document.createElement("tr"); //Crear fila
td1=document.createElement("tr"); //Crear celda
td1.appendChild(document.createTextNode("content")); //Agregar contenido a la celda
row.appendChild(td1); //Agregar celdas a la fila
document.getElementById("rows").append(row); //Agregar filas a <tbody>
3. Mi pequeño descubrimiento (quizás otros ya lo sepan...)
1. Hice una prueba yo mismo, escribiendo <table id="tdl'></table> en html y document.getElementById("tdl").innerHTML="<tr><td></td> en javascript </ tr>", después de escribir esto, pruébelo, las filas de la tabla en el html no se agregarán.
2. Después de completar la prueba anterior, la cambié nuevamente para escribir <table><tr><td id="t'><td><tr></table> en html y document.getElementById("t en javascript " ).innerHTML="<p>content</p>", la prueba puede agregar contenido.
3. Pensamiento: ¿Qué conclusiones se pueden sacar de las dos pruebas anteriores? Aún no he descubierto cómo resumirlas. ¿Qué tipo de etiquetas se pueden agregar directamente a través de internalHTML?