Cómo agregar la tabla de fila a HTML usando JavaScript

A veces, mientras se desarrolla un sitio web, puede haber un requisito para crear o eliminar filas y celdas o agregar datos en una tabla utilizando dinámicamente JavaScript. JavaScript es un lenguaje dinámico que ayuda a controlar dinámicamente, obtener acceso y modificar los componentes HTML en el lado del cliente. Más específicamente, se puede utilizar para agregar una fila a una tabla HTML.

Este manual utilizará JavaScript para explicar el procedimiento para agregar una fila a una tabla.

Cómo agregar la tabla de fila a HTML usando JavaScript?

Para agregar una fila en una tabla, use los siguientes procedimientos:

• Método InserTrow ()
• Crea un nuevo elemento

Verifiquemos cada procedimiento individualmente.

Método 1: Agregue la tabla HTML usando el método InserTrow ()

El "insertar fila()El método se utiliza para agregar una nueva fila al comienzo de la tabla. Crea un nuevo elemento y lo inserta en la tabla. Se necesita un índice como parámetro que define la ubicación de la tabla donde se agregará una fila. Si "0"O no se pasará ningún índice en un método, este método agrega la fila al inicio de la tabla.

Si tiene la intención de agregar la fila al final/final de la tabla, entonces pase el índice "-1"Como argumento.

Sintaxis

Use la siguiente sintaxis para agregar filas en una tabla con la ayuda del método InserTrow ():

mesa.insertrow (í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 utilizando el HTML

y etiquetas. La tabla contiene tres filas y tres columnas o celdas:

Celda de la fila 1	Celda de la fila 1	Celda de la fila 1
Celda de la fila 2	Celda de la fila 2	Celda de la fila 2
Celda de la fila 3	Celda de la fila 3	Celda de la fila 3

Luego, cree un botón que invocará el "añadir fila()"Botón cuando se hace clic:

Haga clic para agregar fila en la parte superior de la tabla

Para diseñar la tabla, estableceremos el borde de cada celda y la tabla como se da a continuación:

tabla, 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()"Eso 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 al pasar el"0"Index como parámetro que indica que la fila se agregará al inicio de la tabla.

Entonces, invoca el "insertcell ()"Método pasando índices que muestran cuántas celdas se agregarán a la fila. Finalmente, agregue los datos del texto o el texto en las celdas usando "innerhtml" propiedad:

functionAdDrow ()
var tavlerow = documento.getElementById ("Tabla");
Var fila = Tablerow.insertrow (0);
VAR Cell1 = fila.insertcell (0);
VAR Cell2 = fila.insertcell (1);
VAR Cell3 = fila.insertcell (2);
celda1.innerhtml = "celda de nueva fila";
celda2.innerhtml = "celda de nueva fila";
celda3.innerhtml = "celda de nueva fila";

Como puede ver en la salida, 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 al final/final de la tabla, pase el "-1"Índice del"insertar fila()" método. Agregará la fila por fin cuando se haga clic en el botón:

functionAdDrow ()
var tavlerow = documento.getElementById ("Tabla");
Var fila = Tablerow.insertrow (-1);
VAR Cell1 = fila.insertcell (0);
VAR Cell2 = fila.insertcell (1);
VAR Cell3 = fila.insertcell (2);
celda1.innerhtml = "celda de nueva fila";
celda2.innerhtml = "celda de nueva fila";
celda3.innerhtml = "celda de nueva fila";

Producción

Pasemos al otro método!

Método 2: Agregue la tabla HTML creando un nuevo elemento

Hay otro método para agregar una fila en una tabla que está creando nuevos elementos utilizando métodos JavaScript, incluido el "createElement ()Método "y el"añadir Niño()" método. El createElement () crea el y Elementos y el método appendChild () agrega las celdas y las filas en una tabla.

Sintaxis

Siga la sintaxis proporcionada para crear un nuevo elemento para agregar una fila en una tabla usando JavaScript:

documento.createElement ("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 "createElement ()" método. Luego, agregue los datos o el texto en las celdas usando el "innerhtml" propiedad. Por último, invoca el "añadir Niño()Método que agregará las celdas en una fila y luego la fila en una tabla:

functionAdDrow ()
var tavlerow = documento.getElementById ("Tabla");
var fila = documento.createElement ("tr");
VAR Cell1 = documento.createElement ("TD");
VAR CELL2 = documento.createElement ("TD");
VAR Cell3 = documento.createElement ("TD");
celda1.innerhtml = "celda de nueva fila";
celda2.innerhtml = "celda de nueva fila";
celda3.innerhtml = "celda de nueva fila";
fila.AppendChild (Cell1);
fila.AppendChild (Cell2);
fila.AppendChild (Cell3);
fila de la tabla.appendChild (fila);

La salida muestra que la nueva fila se agrega 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 utilizando métodos predefinidos de JavaScript, incluido el método appendChild () y el método CreateElement (). Puede agregar una fila al comienzo del final de la tabla utilizando el método InserTrow () pasando índices. Este manual explicó los procedimientos para agregar una nueva fila en una tabla haciendo clic en un botón usando JavaScript.