Este manual usará JavaScript para explicar el procedimiento para agregar una fila a una tabla.
¿Cómo agregar una fila a una tabla HTML usando JavaScript?
Para agregar una fila en una tabla, use los siguientes procedimientos:
Revisemos cada procedimiento individualmente.
Método 1: agregar una fila a la tabla HTML mediante el método insertRow()
Los ' insertar fila() El método ” se utiliza para agregar una nueva fila al comienzo de la tabla. Crea un nuevo elemento
Si tiene la intención de agregar la fila en el último/final de la tabla, pase el índice ' -1 como argumento.
Sintaxis
Utilice la siguiente sintaxis para agregar filas en una tabla con la ayuda del método insertRow():
mesa. insertar fila ( índice ) ;
Aquí, ' índice ” indica la posición en la que desea agregar una nueva fila, como al final de la tabla o al principio.
Ejemplo 1: agregar una fila en la parte superior/inicio de la tabla
Aquí, crearemos una tabla y un botón en un archivo HTML usando el HTML
< tr >
< td > Celda de Fila 1 td >
< td > Celda de Fila 1 td >
< td > Celda de Fila 1 td >
tr >
< tr >
< td > Celda de Fila 2 td >
< td > Celda de Fila 2 td >
< td > Celda de Fila 2 td >
tr >
< tr >
< td > Celda de Fila 3 td >
< td > Celda de Fila 3 td >
< td > Celda de Fila 3 td >
tr >
mesa >
< hermano >
Luego, cree un botón que invocará el ' añadir fila() botón ” cuando se hace clic:
< tipo de botón = 'botón' al hacer clic = 'añadir fila()' > Haga clic para agregar una fila en la parte superior de la tabla botón >Para diseñar la tabla, estableceremos el borde de cada celda y la tabla como se indica a continuación:
mesa, td {borde : 1px negro sólido ;
}
Ahora, agregaremos filas en la tabla en la parte superior/inicio de la tabla usando JavaScript. Para hacerlo, defina una función llamada “ añadir fila() ” que se llamará en el evento onclick() del botón. Luego, obtenga la tabla creada usando el ' getElementById() ' método. Después de eso, llame al ' insertar fila() ” método pasando el “ 0 ” index como parámetro que indica que la fila se agregará al comienzo de la tabla.
Luego, invoque el “ insertarCelda() ” pasando índices que muestran cuántas celdas se agregarán a la fila. Finalmente, agregue los datos de texto o el texto en las celdas usando ' HTML interno ' propiedad:
functionaddRow ( ) {var tableRow = documento. getElementById ( 'mesa' ) ;
estaba fila = tableRow. insertar fila ( 0 ) ;
donde celda1 = fila. insertCell ( 0 ) ;
donde celda2 = fila. insertCell ( 1 ) ;
donde celda3 = fila. insertCell ( 2 ) ;
celda1. HTML interno = 'Celda de Nueva Fila' ;
celda2. HTML interno = 'Celda de Nueva Fila' ;
celda3. HTML interno = 'Celda de Nueva Fila' ;
}
Como puede ver en el resultado, la nueva fila se agrega en la parte superior de la tabla existente haciendo clic en el botón:
Ejemplo 2: agregar una fila al final de la tabla
Si desea insertar una fila en el último/final de la tabla, pase el ' -1 ” índice de la “ insertar fila() ' método. Agregará la fila por fin cuando se haga clic en el botón:
functionaddRow ( ) {var tableRow = documento. getElementById ( 'mesa' ) ;
estaba fila = tableRow. insertar fila ( - 1 ) ;
donde celda1 = fila. insertCell ( 0 ) ;
donde celda2 = fila. insertCell ( 1 ) ;
donde celda3 = fila. insertCell ( 2 ) ;
celda1. HTML interno = 'Celda de Nueva Fila' ;
celda2. HTML interno = 'Celda de Nueva Fila' ;
celda3. HTML interno = 'Celda de Nueva Fila' ;
}
Producción
¡Pasemos al otro método!
Método 2: agregar una fila a la tabla HTML mediante la creación de un nuevo elemento
Hay otro método para agregar una fila en una tabla que está creando nuevos elementos usando métodos de JavaScript, incluido el ' crearElemento() ” método y el “ añadir Niño() ' método. El método createElement() crea los elementos
Sintaxis
Siga la sintaxis provista para crear un nuevo elemento para agregar una fila en una tabla usando JavaScript:
documento. crearElemento ( 'tr' ) ;Aquí el ' tr ” es la fila de la tabla.
Ejemplo
Ahora usaremos la misma tabla creada anteriormente en HTML con un archivo CSS, pero en el archivo JavaScript, usaremos el ' crearElemento() ' método. Luego, agregue los datos o el texto en las celdas usando el ' HTML interno ' propiedad. Por último, invoque el “ añadir Niño() ” método que agregará las celdas en una fila y luego la fila en una tabla:
functionaddRow ( ) {var tableRow = documento. getElementById ( 'mesa' ) ;
estaba fila = documento. crearElemento ( 'tr' ) ;
donde celda1 = documento. crearElemento ( 'td' ) ;
donde celda2 = documento. crearElemento ( 'td' ) ;
donde celda3 = documento. crearElemento ( 'td' ) ;
celda1. HTML interno = 'Celda de Nueva Fila' ;
celda2. HTML interno = 'Celda de Nueva Fila' ;
celda3. HTML interno = 'Celda de Nueva Fila' ;
fila. añadir Niño ( celda1 ) ;
fila. añadir Niño ( celda2 ) ;
fila. añadir Niño ( celda3 ) ;
tableRow. añadir Niño ( fila ) ;
}
El resultado muestra que la nueva fila se agregó con éxito al final de la tabla:
Hemos compilado todos los métodos para agregar una fila en una tabla usando JavaScript.
Conclusión
Para agregar una fila en una tabla, use los dos enfoques: método insertRow() o cree un nuevo elemento usando métodos predefinidos de JavaScript, incluido el método appendChild() y el método createElement(). Puede agregar una fila al principio o al final de la tabla usando el método insertRow() pasando índices. Este manual explica los procedimientos para agregar una nueva fila en una tabla haciendo clic en un botón usando JavaScript.