Cómo crear una tabla en javascript (dos formas de dibujar una tabla en javascript)

Autor：Eve Cole Fecha de actualización：2025-01-28 04:00:02

1. funciones insertRow() e insertCell()

La función insertRow() puede tomar parámetros, de la siguiente forma:

insertRow (índice): el índice comienza desde 0

Esta función agrega una nueva fila antes de la fila del índice, como insertRow (0), que agrega una nueva fila antes de la primera fila. La función insertRow() predeterminada es equivalente a insertRow(-1), que agrega una nueva fila al final de la tabla. Generalmente cuando lo usamos: objTable.insertRow(objTable.rows.length Es para agregar una nueva fila al final de la tabla objTable).

El uso de insertCell() e insertRow es el mismo y no se discutirá aquí.

2. métodos deleteRow() y deleteCell()

La función eliminarFila() puede tomar parámetros, el formato es el siguiente: eliminarFila(índice): el índice comienza desde 0

El mismo significado que los dos métodos anteriores es eliminar las filas y celdas en la posición especificada. Parámetros a pasar: El índice es la posición de la fila en la tabla, que se puede obtener y eliminar mediante el siguiente método:

Copie el código de código de la siguiente manera:

var fila=document.getElementById("ID de la fila");

var index=row.rowIndex;//Existe este atributo, jeje

objTable.deleteRow(índice);

Permítame contarle sobre un problema que encontré durante el uso. Al eliminar filas en una tabla, si elimina una determinada fila, el número de filas en la tabla cambia inmediatamente. Entonces, si desea eliminar todas las filas en la tabla, haga lo siguiente. el código es incorrecto:

Copie el código de código de la siguiente manera:

función borrarFila(){

objTable= document.getElementById("miTabla");

para (var i=1; i<objTable.rows.length; i++)

{

tblObj.deleteRow(i);

}

Este código quiere eliminar el cuerpo de la tabla original. Hay dos problemas. En primer lugar, no puede ser eliminarFila(i), debería ser eliminarFila(1). Porque al eliminar filas de la tabla, la cantidad de filas en la tabla cambia. Esta es la clave del problema. Las filas siempre son cada vez más pequeñas y la cantidad de filas eliminadas siempre será menor de la mitad de lo esperado. , elimine la tabla correctamente. La línea de código debería verse así:

Copie el código de código de la siguiente manera:

función borrarFila(){

objTable= document.getElementById("miTabla");

var longitud = objTable.rows.length;

para(var i=1; i<longitud; i++)

{

objTable.deleteRow(i);

}

3. Establecer dinámicamente las propiedades de celdas y filas.

A. Utilice el método setAttribute() con el siguiente formato: setAttribute(atributo, valor de atributo)

Nota: Este método se puede utilizar para casi todos los objetos DOM. El primer parámetro es el nombre del atributo, por ejemplo: borde, y el segundo parámetro es el valor que desea establecer para el borde, por ejemplo: 1.

Copie el código de código de la siguiente manera:

var objMyTable = document.getElementById("miTabla");

objMyTable.setAttribute("border",1);//Establece el borde en 1 para la tabla

Para otras cosas, por ejemplo, si desea establecer la altura de un TD, también debe obtener primero el objeto TD y luego usar el método setAttribute().

Copie el código de código de la siguiente manera:

var objCell = document.getElementById("miCelda");

objCell.setAttribute("height",24);//Establece la altura de la celda en 24

Encontré un problema con la configuración de estilos al usarlo. No puedes usar setAttribute("class","inputbox2"); en su lugar, deberías usar setAttribute("className","inputbox2"). , algunos Los atributos son inconsistentes con lo que tenemos en DW, jaja, exploremos nosotros mismos.

B. Asignación directa

Copie el código de código de la siguiente manera:

var objMyTable = document.getElementById("miTabla");

objMyTable.border=1;//Establece el borde en 1 para la tabla

Este método también es aplicable a todos, jaja.

4. Crea una tabla

Una vez que comprenda la adición y eliminación de filas <tr> y celdas <td>, podrá crear una tabla.

Paso 1: Debe tener una tabla que desee cambiar dinámicamente. De lo que estoy hablando aquí es de una tabla que ya existe en la página. Necesitamos establecer una identificación: myTable.

Copie el código de código de la siguiente manera:

var objMyTable = document.getElementById("miTabla");

Paso 2: crear objetos de fila y columna

Copie el código de código de la siguiente manera:

índice var = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//Las filas a agregar se agregan desde la penúltima fila.

//Número de casilla de celda

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<tipo de entrada='text' tamaño='5' nombre="+cartonNoName+" id="+cartonNoName+" valor=''>";

newCellCartonNo.setAttribute("className","tablerdd");

Eso es todo, simplemente puedes crear una fila y una columna. He publicado el código específico a continuación. Es solo un ejemplo muy simple, pero el método probablemente sea el anterior Jaja, exploremos lentamente ~.

Copie el código de código de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<título>Blu-ray-BlueShine</título>

var Conteo=falso,NO=1;

función agregarFila(){

Contar=!Contar;

//Añadir una fila

var newTr = testTbl.insertRow(testTbl.rows.length);

//Añadir dos columnas

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//Establecer el contenido y los atributos de la columna

if(Contar){newTr.style.background="#FFE1FF";}

más {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<tipo de entrada=id de casilla de verificación="box4">';

NO++

newTd1.innerText="Línea "+ NO+";

}

</script>

</cabeza>

<trbgcolor="#FFEFD5">

<td>Línea 1</td>

</tr>

</tabla>

</etiqueta>

</cuerpo>

</html>

5. método appendChild()

Copie el código de código de la siguiente manera:

<html>

<title>Mi página de prueba</title>

<!--

var número de texto = 1;

función addTextBox(formulario, afterElement) {

// Incrementa el número del cuadro de texto

número de texto++;

//Crea la etiqueta

var etiqueta = document.createElement("etiqueta");

//Crea el cuadro de texto

var textField = document.createElement("entrada");

textField.setAttribute("tipo","texto");

textField.setAttribute("nombre","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Agrega el texto de la etiqueta

label.appendChild(document.createTextNode("Cuadro de texto #"+textNumber+": "));

// Pon el cuadro de texto dentro

etiqueta.appendChild(textField);

// Agregalo todo al formulario

form.insertBefore(etiqueta,despuésElemento);

devolver falso;

}

función eliminarTextBox(formulario) {

if (textNumber > 1) { // Si hay más de un cuadro de texto

// Elimina el último agregado

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

número de texto--;

}

//-->

</script>

<!--

etiqueta {

mostrar:bloquear;

margen: .25em 0em;

}

-->

</estilo>

</cabeza>

<label>Cuadro de texto n.º 1: <tipo de entrada="text" name="txt1" id="txt1" /></label>

<p>

</p>

</formulario>

</cuerpo>

</html>

<html>

<title>Mi página de prueba</title>

<!--

var número de texto = 1;

función addTextBox(formulario, afterElement) {

// Incrementa el número del cuadro de texto

número de texto++;

//Crea la etiqueta

var etiqueta = document.createElement("etiqueta");

//Crea el cuadro de texto

var textField = document.createElement("entrada");

textField.setAttribute("tipo","texto");

textField.setAttribute("nombre","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Agrega el texto de la etiqueta

label.appendChild(document.createTextNode("Cuadro de texto #"+textNumber+": "));

// Pon el cuadro de texto dentro

etiqueta.appendChild(textField);

// Agregalo todo al formulario

form.insertBefore(etiqueta,despuésElemento);

devolver falso;

}

función eliminarTextBox(formulario) {

if (textNumber > 1) { // Si hay más de un cuadro de texto

// Elimina el último agregado

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

número de texto--;

}

//-->

</script>

<!--

etiqueta {

mostrar:bloquear;

margen: .25em 0em;

}

-->

</estilo>

</cabeza>

<label>Cuadro de texto n.º 1: <tipo de entrada="text" name="txt1" id="txt1" /></label>

<p>

</p>

</formulario>

</cuerpo>

</html>