Foros del Web » Programando para Internet » Javascript »

Eliminar tr de una tabla

Estas en el tema de Eliminar tr de una tabla en el foro de Javascript en Foros del Web. Buenas a todos, estoy mostrando una tabla y necesito borrar filas dinamicamente con javascript. Cada fila de mi tabla esta formada así: Código: <tr> <td>Una ...
  #1 (permalink)  
Antiguo 14/04/2010, 16:25
 
Fecha de Ingreso: febrero-2008
Ubicación: Madrid
Mensajes: 474
Antigüedad: 16 años, 2 meses
Puntos: 1
Exclamación Eliminar tr de una tabla

Buenas a todos, estoy mostrando una tabla y necesito borrar filas dinamicamente con javascript.

Cada fila de mi tabla esta formada así:

Código:
<tr>
  <td>Una imagen</td>
   <td>input</td>
   <td>input</td>
</tr>
Necesito que el onClick de la imagen llame a una función que elimine toda la fila (<tr>) a la que pertenece dicha imagen.

Lo estoy intentando con estas dos funciones que he encontrado:

Código:
function borrarFila2(obj){
  document.getElementById('tabla').deleteRow(obj)                        
}

function borrarFila(t){
  var td = t.parentNode;
  var tr = td.parentNode;
  var table = tr.parentNode;
  table.removeChild(tr);
}
Pero la primera me borra siempre la primera fila de la tabla y la segunda me borra solo el td donde esta la imagen.

Las llamo así:

Código HTML:
<tr>
  <td>
    <a href="#"><IMG src="../img/aspa.png"  onClick='borrarFila(this);'></a>
  </td>
</tr> 
Muchas gracias por todo.
  #2 (permalink)  
Antiguo 14/04/2010, 16:32
 
Fecha de Ingreso: enero-2008
Mensajes: 614
Antigüedad: 16 años, 3 meses
Puntos: 57
Respuesta: Eliminar tr de una tabla

A la funcion deleteRow le debes enviar el numero de la fila que quieres borrar
  #3 (permalink)  
Antiguo 14/04/2010, 16:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Eliminar tr de una tabla

Hola:

Parece que a tu árbol no le cuentas uno de sus nodos... el tag "a"...

Por cierto, los manejadores de eventos se escriben con todas las letras minúsculas...

Código:
function borrarFila(t){
  var a = t.parentNode(t);
  var td = a.parentNode;
  var tr = td.parentNode;
  var table = tr.parentNode;
  table.removeChild(tr);
}
Y otro apunte es que table en tu script referencia seguramente al tag tbody (una curiosidad)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 15/04/2010, 11:36
 
Fecha de Ingreso: febrero-2008
Ubicación: Madrid
Mensajes: 474
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Eliminar tr de una tabla

Gracias a los dos, pero:

Para Caricatos: Si empleo tu código me da el siguiente error:
Error: t.parentNode is not a function

Para posman: ¿Cómo se puede calcular el número de fila de la tabla pasando el objeto que le paso? Solo se me ocurre con divs pero no es una solución que me atraiga mucho porque añado y quito filas dinámicamente y se puede liar.

Gracias
  #5 (permalink)  
Antiguo 15/04/2010, 11:52
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Eliminar tr de una tabla

Cita:
Iniciado por jorgegetafe Ver Mensaje
...

Para Caricatos: Si empleo tu código me da el siguiente error:
Error: t.parentNode is not a function

Gracias
Si, si... tienes razón... se me coló en el copy & paste... sería:

var a = t.parentNode;

Sólo tendrías que quitarle los paréntesis...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 15/04/2010, 12:36
 
Fecha de Ingreso: febrero-2008
Ubicación: Madrid
Mensajes: 474
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Eliminar tr de una tabla

Cita:
Iniciado por caricatos Ver Mensaje
Si, si... tienes razón... se me coló en el copy & paste... sería:

var a = t.parentNode;

Sólo tendrías que quitarle los paréntesis...

Saludos
Estupendo, ya me funciona en las líneas que genero mediante php, pero en las que genero mediante javascript únicamente me borra la imagen.

¿Me sabrías por favor decir por qué? Las líneas con java script las genero así:
Código:
function aniadirFila(){
                        var indiceFila=1;
                        myNewRow = document.getElementById('tabla').insertRow(-1);
                        myNewRow.id=indiceFila;
                        myNewCell=myNewRow.insertCell(-1);
                        myNewCell.innerHTML='<tr class="tdPar" onmouseover="this.style.backgroundColor=\'#BECFDF\'" onmouseout="this.style.backgroundColor=\'#D5D5D5\'">' +
                                            '<td valign="center" width="1%"><a href="#"><IMG src="../img/aspa.png" alt="Eliminar linea" title="Eliminar linea" border="0" onClick=\'borrarFila(this)\'></a>' +
                                            '</td>';
                        myNewCell=myNewRow.insertCell(-1);
                        myNewCell.innerHTML='<input type="text" name="concepto" style=\'width: 100%\' maxlength="500">';
                        myNewCell=myNewRow.insertCell(-1);
                        myNewCell.innerHTML='<input type="text" name="descripcion" style=\'width: 100%\' maxlength="500">';
                        myNewCell=myNewRow.insertCell(-1);
                        myNewCell.innerHTML='<input type="text" name="cantidad" size="7" maxlength="7" style=\'text-align: right\' onChange=\'fCalcularImporte();\'>';
                        myNewCell=myNewRow.insertCell(-1);
                        myNewCell.innerHTML='<input type="text" name="importeSinIva" size="7" maxlength="7" style=\'text-align: right\' onChange=\'fCalcularImporte();\'></tr>';
                        indiceFila++;
                    }
  #7 (permalink)  
Antiguo 03/11/2010, 12:38
 
Fecha de Ingreso: noviembre-2010
Mensajes: 12
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Eliminar tr de una tabla

hola yo genero las filas en forma decendene con ua variable fil y al querer implementar la solucion de caricatos me genera el sig. error: null es nulo o no es un objeto este es mi codigo:


<HTML>

<HEAD>

<TITLE>Lista de Datos Dinámica</TITLE>

</HEAD>

<BODY>


<SCRIPT LANGUAGE="JavaScript">
var t,impor,cant,cun,totalpmes,totalpcuenta,sumames=0, iva,fil=2;


function deshabilitar(){
document.formulario.ingresa.disabled = "true";
document.formulario.ingresa.value = "Ingresado";
}


function añadirDatosLista ()
{

var confirma;


//valido el rugro
if (document.forms[0].rugros.selectedIndex==0 || document.forms[0].rugros.selectedIndex==5 ||

document.forms[0].rugros.selectedIndex==10 ){
alert("Debe seleccionar un rugro.")
document.formulario.rugros.focus();
return 0;
}
cant= parseInt(document.forms[0].cantidad.value)
if (isNaN(cant)) {
alert("Deve introducir numeros enteros");
document.forms[0].cantidad.value="";
document.formulario.cantidad.focus();
return 0;
}
else{
cant=document.forms[0].cantidad.value;
cant= parseInt(cant);
}

if (!isNaN(document.forms[0].unidad.value)) {
alert("Deve introducir la cantidad en unidades ejemplo: spots,anuncios,etc.");
document.forms[0].unidad.value="";
document.formulario.unidad.focus();
return 0;
}


cun= parseInt(document.forms[0].cunit.value)
if (isNaN(cun)) {
alert("Deve introducir numeros enteros ");
document.forms[0].cunit.value="";
document.formulario.cunit.focus();
return 0;
}

else{
cun=document.forms[0].cunit.value;
cun= parseInt(cun);
}


var contador=1;
var fila,celda1,celda2,celda3,celda4,celda5,celda6,nod o1,nodo2,nodo3,nodo4,nodo5,borrar;

t=document.getElementById("tabla"); //Obtenemos la tabla por su identificador "tabla"

fila=t.insertRow(fil); //Insertamos una nueva fila vacía en la posición (fil) 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);


impor=cant*cun;
sumames=sumames+impor;

var indice = document.forms[0].rugros.selectedIndex;
nodo1=document.createTextNode(document.forms[0].rugros.options[indice].text); //Creación de un nodo de

tipo texto con el texto del campo rugros
nodo2=document.createTextNode(document.forms[0].cantidad.value);
nodo3=document.createTextNode(document.forms[0].unidad.value);
nodo4=document.createTextNode(document.forms[0].cunit.value);
nodo5=document.createTextNode(impor);
nodo6=document.createTextNode(document.forms[0].comentarios.value);

//Creación del boton de borrado
borrar=document.createElement("input");
borrar.type='reset'
borrar.value="borrar";
borrar.onclick= function()
{borrarDatosLista(this);}

celda1.appendChild(nodo1); //Se agrega a la primera celda el nodo de tipo texto con el contenido del

rugro
celda2.appendChild(nodo2);
celda3.appendChild(nodo3);
celda4.appendChild(nodo4);
celda5.appendChild(nodo5);
celda6.appendChild(nodo6);
celda7.appendChild(borrar);

fil= fil+1;

confirma=confirm("Desea seguir ingresando");
if(confirma ==true)
{


document.formulario.rugros.focus();
document.formulario.cantidad.value="";
document.formulario.unidad.value="";
document.formulario.cunit.value="";
document.formulario.comentarios.value="";


}
else{

deshabilitar();

totalpmes=0;

totalpmes=totalpmes + sumames;

t=document.getElementById("tabla");

fila=t.insertRow(fil);

celda1=fila.insertCell(0);
celda2=fila.insertCell(1);

nodo1=document.createTextNode("TOTAL POR MES:");
nodo2=document.createTextNode(totalpmes);

celda1.appendChild(nodo1);
celda2.appendChild(nodo2);

iva=0;
iva=totalpmes*.15;

fila=t.insertRow(fil);

celda1=fila.insertCell(0);
celda2=fila.insertCell(1);

nodo1=document.createTextNode("IVA:");
nodo2=document.createTextNode(iva);

celda1.appendChild(nodo1);
celda2.appendChild(nodo2);

totalpcuenta=0;
totalpcuenta=totalpmes+iva;


fila=t.insertRow(fil);

celda1=fila.insertCell(0);
celda2=fila.insertCell(1);

nodo1=document.createTextNode("TOTAL POR CUENTA:");
nodo2=document.createTextNode(totalpcuenta);

celda1.appendChild(nodo1);
celda2.appendChild(nodo2);


}
}

function borrarDatosLista(obj)
{

var a = t.parentNode;
var td = a.parentNode;
var tr = td.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}



</SCRIPT>

<FORM NAME=formulario action= "conexi.php ">

Rugro:<select name="rugros" size="1" align="center">
<option value="r">Radio
<option value="l">laser
<option value="n">nova'92
<option value="c">la comadre
<option value="o">oriestereo
<option value="p">Prensa
<option value="e">el mundo
<option value="s">el sol del centro
<option value="d">el dictamen
<option value="x">el diario de Xalapa
<option value="t">Television
<option value="lo">tv local Orizaba
<option value="ao">tv azteca Orizaba
<option value="av">tv azteca veracruz
<option value="ca">cintillos tv azteca Veracruz
<option value="p">Perifoneo
<option value="tr">Trailer
<option value="es">Espectaculares
</select>

<BR>
Cantidad: <INPUT TYPE="text" NAME=cantidad>
<br>
Unidad: <INPUT TYPE="text" NAME=unidad>
<BR>
Cantidad unitaria: <INPUT TYPE="text" NAME=cunit>
<BR>
Comentario:<textarea cols="40" rows="10" name="comentarios"></textarea>
<BR>
<input type="button" name="ingresa" value="Agregar" onClick="añadirDatosLista()" >
<input type="button" name="xxxxx" value="xxxxx" onClick="">
<input type="button" name="imprimir" value="Imprimir" onClick="imprimir()">
<input type="submit" name="enviar" value="enviar" onClick="<a href="conexi.php?

impor=impor&totalpmes=totalpmes&totalpcuenta=total pcuenta&iva=iva"></a> " >

</form>

<B>Lista de Datos Dinámica</B>

<BR>

<TABLE ID="tabla" BORDER="1"cellspacing="2" cellpading="1" bgcolor="#f87820">
<caption align="center">Llenado de presupuesto</caption>

<td colspan="5" align="center">Medios de comunicacion </td>

<tr>
<th>Descripcion de rugro</th>
<th>Cantidad</th>
<th>Unidad</th>
<th>C.unit</th>
<th>Importe</th>
<th>Comentarios</th>
</tr>
</TABLE>


</BODY>

</HTML>

Etiquetas: eliminar, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:55.