JavaScript - Borrado en Tabla Dinámica

   
Vista:

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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder