Borrado en Tabla Dinámica
Publicado por Carlos (2 intervenciones) el 29/05/2008 18:31:00
El programa consiste en un formulario en el que se introducen datos y, cada vez que se pulsa un botón añadir, se inserta una nueva fila en una tabla dinámica con los datos.Cada fila tiene un boton de borrado que la eliminará al ser pulsado y lo que no sé es cómo averiguar qué fila debe ser borrada, es decir, qué botón se ha pulsado
El código es:
<HTML>
<HEAD>
<TITLE>Lista de Datos Dinámica</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var contador=1;
function añadirDatosLista ()
{
var t,fila,celda1,celda2,celda3,celda4,celda5,celda6,celda7,nodo1,nodo2,nodo3,nodo4,nodo5,nodo6,borrar;
t=document.getElementById("tabla"); //Obtenemos la tabla por su identificador "tabla"
fila=t.insertRow(1); //Insertamos una nueva fila vacía en la primera posición de la tabla
celda1=fila.insertCell(0); //Añadimos una nueva celda a la fila antes creada en la tabla en la primera posición
celda2=fila.insertCell(1);
celda3=fila.insertCell(2);
celda4=fila.insertCell(3);
celda5=fila.insertCell(4);
celda6=fila.insertCell(5);
celda7=fila.insertCell(6);
nodo1=document.createTextNode(document.forms[0].dni.value); //Creación de un nodo de tipo texto con el texto del campo DNI
nodo2=document.createTextNode(document.forms[0].nombre.value);
nodo3=document.createTextNode(document.forms[0].ape1.value);
nodo4=document.createTextNode(document.forms[0].ape2.value);
nodo5=document.createTextNode(document.forms[0].edad.value);
nodo6=document.createTextNode(document.forms[0].ciudad.value);
borrar=document.createElement("<INPUT TYPE='button' VALUE=document.forms[0].dni.value ONCLICK='borrarDatosLista(this)'>"); //Creación del boton de borrado
contador++;
celda1.appendChild(nodo1); //Se agrega a la primera celda el nodo de tipo texto con el contenido del DNI
celda2.appendChild(nodo2);
celda3.appendChild(nodo3);
celda4.appendChild(nodo4);
celda5.appendChild(nodo5);
celda6.appendChild(nodo6);
celda7.appendChild(borrar);
}
function borrarDatosLista (obj)
{
t=document.getElementById("tabla");
//t.deleteRow ();
}
</SCRIPT>
<FORM NAME=formulario>
DNI: <INPUT TYPE="text" NAME=dni>
<BR>
Nombre: <INPUT TYPE="text" NAME=nombre>
<BR>
Apellido 1: <INPUT TYPE="text" NAME=ape1>
<BR>
Apellido 2: <INPUT TYPE="text" NAME=ape2>
<BR>
Edad: <INPUT TYPE="text" NAME=edad>
<BR>
Ciudad: <INPUT TYPE="text" NAME=ciudad>
<BR>
<BR>
<INPUT TYPE="button" VALUE="Añadir" onClick="añadirDatosLista ()">
</FORM>
<B>Lista de Datos Dinámica</B>
<BR>
<TABLE ID="tabla" BORDER="1">
<TR>
<TH>DNI</TH>
<TH>Nombre</TH>
<TH>Apellido 1</TH>
<TH>Apellido 2</TH>
<TH>Edad</TH>
<TH>Ciudad</TH>
<TH>Borrado</TH>
</TR>
</TABLE>
</BODY>
</HTML>
El código es:
<HTML>
<HEAD>
<TITLE>Lista de Datos Dinámica</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var contador=1;
function añadirDatosLista ()
{
var t,fila,celda1,celda2,celda3,celda4,celda5,celda6,celda7,nodo1,nodo2,nodo3,nodo4,nodo5,nodo6,borrar;
t=document.getElementById("tabla"); //Obtenemos la tabla por su identificador "tabla"
fila=t.insertRow(1); //Insertamos una nueva fila vacía en la primera posición de la tabla
celda1=fila.insertCell(0); //Añadimos una nueva celda a la fila antes creada en la tabla en la primera posición
celda2=fila.insertCell(1);
celda3=fila.insertCell(2);
celda4=fila.insertCell(3);
celda5=fila.insertCell(4);
celda6=fila.insertCell(5);
celda7=fila.insertCell(6);
nodo1=document.createTextNode(document.forms[0].dni.value); //Creación de un nodo de tipo texto con el texto del campo DNI
nodo2=document.createTextNode(document.forms[0].nombre.value);
nodo3=document.createTextNode(document.forms[0].ape1.value);
nodo4=document.createTextNode(document.forms[0].ape2.value);
nodo5=document.createTextNode(document.forms[0].edad.value);
nodo6=document.createTextNode(document.forms[0].ciudad.value);
borrar=document.createElement("<INPUT TYPE='button' VALUE=document.forms[0].dni.value ONCLICK='borrarDatosLista(this)'>"); //Creación del boton de borrado
contador++;
celda1.appendChild(nodo1); //Se agrega a la primera celda el nodo de tipo texto con el contenido del DNI
celda2.appendChild(nodo2);
celda3.appendChild(nodo3);
celda4.appendChild(nodo4);
celda5.appendChild(nodo5);
celda6.appendChild(nodo6);
celda7.appendChild(borrar);
}
function borrarDatosLista (obj)
{
t=document.getElementById("tabla");
//t.deleteRow ();
}
</SCRIPT>
<FORM NAME=formulario>
DNI: <INPUT TYPE="text" NAME=dni>
<BR>
Nombre: <INPUT TYPE="text" NAME=nombre>
<BR>
Apellido 1: <INPUT TYPE="text" NAME=ape1>
<BR>
Apellido 2: <INPUT TYPE="text" NAME=ape2>
<BR>
Edad: <INPUT TYPE="text" NAME=edad>
<BR>
Ciudad: <INPUT TYPE="text" NAME=ciudad>
<BR>
<BR>
<INPUT TYPE="button" VALUE="Añadir" onClick="añadirDatosLista ()">
</FORM>
<B>Lista de Datos Dinámica</B>
<BR>
<TABLE ID="tabla" BORDER="1">
<TR>
<TH>DNI</TH>
<TH>Nombre</TH>
<TH>Apellido 1</TH>
<TH>Apellido 2</TH>
<TH>Edad</TH>
<TH>Ciudad</TH>
<TH>Borrado</TH>
</TR>
</TABLE>
</BODY>
</HTML>
Valora esta pregunta
0