No hablaré sobre el control CSS de la mesa por ahora. Primero, compartiré los DOM de uso común en la tabla a continuación.
Los métodos de uso común para agregar operaciones de tabla son los métodos insertrow () e insertcell ().
La fila se calcula a partir de cero, por ejemplo:
Copie el código de la siguiente manera: var oTr = document.getElementById ("miembro"). InserTrow (2)
Significa agregar una nueva línea a la segunda línea.
La copia del código es la siguiente:
var atexT = new Array ();
atext [0] = document.createTextNode ("FreshEggs");
atext [1] = document.createTextNode ("w610");
atext [2] = document.createTextNode ("5 de noviembre");
atext [3] = document.createTextNode ("scorpio");
atext [4] = document.createTextNode ("1038818");
para (var i = 0; i <atext.length; i ++) {
var otd = oTr.insertcell (i);
OTD.AppendChild (atext [i]);
}
La variable OTR inserta una nueva fila para la tabla, luego usa InsertCell para insertar nuevos datos para esta fila, usa CreateTextNode para crear un nuevo nodo de texto y le da a OTD en AppendChild, y OTD es la nueva celda.
1. Inserte una fila (tabla dinámica de suma)
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var oTr = document.getElementById ("miembro"). Insertrow (2); // inserta una línea
var atexT = new Array ();
atext [0] = document.createTextNode ("FreshEggs");
atext [1] = document.createTextNode ("w610");
atext [2] = document.createTextNode ("5 de noviembre");
atext [3] = document.createTextNode ("scorpio");
atext [4] = document.createTextNode ("1038818");
para (var i = 0; i <atext.length; i ++) {
var otd = oTr.insertcell (i);
OTD.AppendChild (atext [i]);
}
}
</script>
<table summary = "Lista de miembros en EE Sunday" id = "miembro">
<tittion> Lista de miembros </tittion>
<tr>
<th scope = "col"> nombre </th>
<th scope = "col"> clase </th>
<th scope = "col"> cumpleaños </th>
<th scope = "col"> constelation </th>
<th scope = "col"> mobile </th>
</tr>
<tr>
<TD> Isaac </td>
<TD> W13 </td>
<TD> 24 de junio </td>
<TD> CANCER </td>
<TD> 1118159 </td>
</tr>
<tr>
<TD> Girlwing </td>
<TD> W210 </td>
<TD> 16 de septiembre </td>
<TD> Virgo </td>
<TD> 1307994 </td>
</tr>
<tr>
<TD> TASTESTORY </td>
<TD> W15 </td>
<TD> 29 de noviembre </td>
<TD> SAGITARIO </td>
<TD> 1095245 </td>
</tr>
</table>
2. Modifique el contenido de la tabla
Después de crear la tabla, puede usar directamente htmldom para operar la tabla, que es más conveniente que document.getElementById () y document.getElementsBytagName ().
otable.rows [i] .Cell [J]
Lo anterior puede acceder fácilmente a la fila I-Thth y J-Th de la tabla a través de las dos filas y celdas de los atributos (ambas contadas a partir de 0). Después de obtener el objeto celular, puede usar el atributo InnerHTML para modificar el contenido de Xiangyu.
Por ejemplo, modifique el contenido de 4 filas y 5 columnas para que sea bueno
Entonces puede usar el siguiente código
La copia del código es la siguiente:
var otable = document.getElementById ("Tabla1");
otable.rows [4] .Cells [5] .innerhtml = "bueno";
3. Eliminar el contenido de la tabla
Dado que la tabla tiene la función de agregar, modificarla y eliminarla.
Eliminar filas en la tabla usa el método Deleterow (i), donde yo es el número de fila.
Eliminar columnas en la tabla utiliza el método DeletECLEL (j) de TR.
El siguiente código indica la segunda fila de la tabla eliminada y la segunda columna de la tercera fila de la tabla original
La copia del código es la siguiente: var otable = document.getElementById ("Tabla1"); otable.deleterow [2]; otable.rows [2] .deletecell [3];
El siguiente código indica que si se elimina la segunda fila de la tabla y se considera que la segunda columna de la tercera fila de la tabla original tiene una eliminación dinámica y no afecta el marco HTML general, o si el contenido de la tabla es mucho, se puede adoptar la deleción dinámica y la adición.
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var oTr = document.getElementById ("miembro"). Insertrow (2); // inserta una línea
var atexT = new Array ();
atext [0] = document.createTextNode ("FreshEggs");
atext [1] = document.createTextNode ("w610");
atext [2] = document.createTextNode ("5 de noviembre");
atext [3] = document.createTextNode ("scorpio");
atext [4] = document.createTextNode ("1038818");
para (var i = 0; i <atext.length; i ++) {
var otd = oTr.insertcell (i);
OTD.AppendChild (atext [i]);
}
}
</script>
<table summary = "Lista de miembros en EE Sunday" id = "miembro">
<tittion> Lista de miembros </tittion>
<tr>
<th scope = "col"> nombre </th>
<th scope = "col"> clase </th>
<th scope = "col"> cumpleaños </th>
<th scope = "col"> constelation </th>
<th scope = "col"> mobile </th>
</tr>
<tr>
<TD> Isaac </td>
<TD> W13 </td>
<TD> 24 de junio </td>
<TD> CANCER </td>
<TD> 1118159 </td>
</tr>
<tr>
<TD> Girlwing </td>
<TD> W210 </td>
<TD> 16 de septiembre </td>
<TD> Virgo </td>
<TD> 1307994 </td>
</tr>
<tr>
<TD> TASTESTORY </td>
<TD> W15 </td>
<TD> 29 de noviembre </td>
<TD> SAGITARIO </td>
<TD> 1095245 </td>
</tr>
</table>
Eliminar columnas
La copia del código es la siguiente:
function deletecolumn (otable, inum) {
// Personalizar la función de eliminación de columnas, es decir, elimine la celda correspondiente para cada fila
para (var i = 0; i <otable.rows.length; i ++)
otable.rows [i] .deletecell (inum);
}
window.onload = function () {
var otable = document.getElementById ("Tabla1");
DeleteColumn (otable, 2);
}
Para eliminar las columnas de la tabla, no hay un método directamente llamable en el DOM. Debe escribir el método DeleteColumn () usted mismo. Este método acepta dos parámetros, un parámetro es el objeto de tabla y el otro parámetro es el número de columna que desea eliminar. El método de escritura es muy simple. Usando el método DeleteCell (), cada fila ejecuta el método correspondiente para eliminar las celdas.