borrar tabla creada dinamicamente

chalchis · #1 (**permalink**) 16/11/2005, 15:14

Hola amigos como podria borrar una tabla que se crea dinamicamente
aqui le mando el codigo, lo que llevo hecho

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<SCRIPT language="Javascript">
function suma(lugar)
{
var tabla = document.createElement("table");
tabla.border="1";
tabla.width="477";
tabla.id="borrado";
//var miTabla = document.getElementById("cuerpoTabla");
var cuerpo = document.createElement("tbody");

var linea = document.createElement("tr");//primera fila*******************
linea.className="texforms";
linea.style.backgroundColor="#CCCCCC";

var celda = document.createElement("td");
celda.width="19";
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
celda2.width="313";
var contenido2 = document.createTextNode("Producto");

var celda3 = document.createElement("td");
celda3.width="70";
var contenido3 = document.createTextNode("Cantidad");

var celda4 = document.createElement("td");
celda4.width="70";
var contenido4 = document.createElement("input");
contenido4.name="delete";
contenido4.type="button";
contenido4.value="borrar";
contenido4.onclick = function(){borraNodo(this)};

tabla.appendChild(cuerpo);//<tbody> solo una vez se imprime

cuerpo.appendChild(linea);//<tr>
//******************************
linea.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea2 = document.createElement("tr");//fila 2*********************
linea2.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
var contenido2 = document.createElement('input');
contenido2.type = "text"
contenido2.name = "txproducto[]"
contenido2.size="50"
contenido2.className="txtBoxStyle3"

var celda3 = document.createElement("td");
celda3.align="center";
var contenido3 = document.createElement('input');
contenido3.type = "text"
contenido3.name = "txcantidad[]"
contenido3.size="5"
contenido3.className="txtBoxStyle3"

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea2);//<tr>
//******************************
linea2.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea2.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea2.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea2.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea3 = document.createElement("tr");//fila 3*********************
linea3.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
var contenido2 = document.createTextNode('Justificación');

var celda3 = document.createElement("td");
var contenido3 = document.createTextNode(' ');

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea3);//<tr>
//******************************
linea3.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea3.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea3.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea3.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea4 = document.createElement("tr");//fila 4*********************
linea4.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('textarea');
contenido2.cols="60";
contenido2.rows="4";
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea4);//<tr>

linea4.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea4.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

var linea5 = document.createElement("tr");//fila 5*********************
linea5.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
var contenido2 = document.createTextNode('Proveedor');

var celda3 = document.createElement("td");
var contenido3 = document.createTextNode(' ');

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea5);//<tr>
//******************************
linea5.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea5.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea5.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea5.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea6 = document.createElement("tr");//fila 6*********************
linea6.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('select');
contenido2.name = "proveedores"
//contenido2.options[1] = new Option('text zero', 'value0');
//contenido2.setAttribute("proveedores","1","1");
contenido2.options[0] = new Option('', '');
contenido2.options[1] = new Option('Distribuidora Papelera del Golfo SA de CV', 'Distribuidora Papelera del Golfo SA de CV');contenido2.options[2] = new Option('Ofix SA de CV', 'Ofix SA de CV');contenido2.options[3] = new Option('Office Depot SA de CV', 'Office Depot SA de CV');contenido2.options[4] = new Option('Recycling System', 'Recycling System');contenido2.options[5] = new Option('Arleth Baltazar Silva', 'Arleth Baltazar Silva');contenido2.options[6] = new Option('Moisés Lazo Torres', 'Moisés Lazo Torres');
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea6);//<tr>

linea6.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea6.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

var linea7 = document.createElement("tr");//fila 7*********************
linea7.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode("#");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('textarea');
contenido2.cols="60";
contenido2.rows="4";
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea7);//<tr>

linea7.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea7.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

document.getElementById(lugar).appendChild(tabla);

}

function borraNodo(id)
{
yo=document.getElementById(id);
//var tabla=document.getElementById("cuerpoTabla");
yo.parentNode.removeChild(id);
}

</script>
</head>

<body class="tabla" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table width="477" border="0" cellspacing="0" cellpadding="0" align="center">
<form name="formulario" method="post" onSubmit="return verificar(this)" action="insumos.php">
<tr>
<td bgcolor="#a3a28e" height=1></td>
</tr>
<tr>
<td bgcolor="#F1F5FA" class="texforms">
<button name="boton_1" type="button" title="Nuevo insumo" alt="Nuevo insumo" class="botonenviar" onClick="suma('aqui')">
<img src="../Imagen/Insumos_img/nuevo.gif" border="0" width="22" height="22">
</button>
<button name="boton_2" type="button" title="Eliminar insumo" alt="Eliminar insumo" class="botonenviar" >
<img src="../Imagen/Insumos_img/cancel.gif" border="0" width="22" height="22">
</button>
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#F1F5FA" id="aqui">  </td>
</tr>
<tr>
<td bgcolor="#F1F5FA">botones</td>
</tr>
<tr>
<td bgcolor="#a3a28e" height=1></td>
</tr>
</form>
</table>
</body>
</html>

programeitor · #2 (**permalink**) 18/11/2005, 08:38

Coloca esta instruccion dentro de la funcion borraNodo(id)

document.getElementById('aqui').removeChild(id.parentNode.parentNode.parentNode.parentNode)

caricatos · #3 (**permalink**) 18/11/2005, 08:47

Hola:

No sé porqué ¿? me parece que el problema está resuelto... (espero que chalchis lo confirme...)

function borraNodo(id)
{
yo=document.getElementById(id);
yo.parentNode.removeChild(yo);
}

Se lo había puesto en otro mensaje...

programeitor: se supone que "id" es una cadena y no un objeto.

Saludos

chalchis · #4 (**permalink**) 18/11/2005, 09:35

jeje se ve que algo absurda el manejo del id
pero bueno ahi les va
var c=0;
function suma(lugar)
{
var tabla = document.createElement("table");
tabla.border="0";
tabla.width="477";
tabla.id="borrado"+c;
//var miTabla = document.getElementById("cuerpoTabla");
var cuerpo = document.createElement("tbody");

var linea = document.createElement("tr");//primera fila*******************
linea.className="texforms";
linea.style.backgroundColor="#CAD8EA";

var celda = document.createElement("td");
celda.width="19";
//var contenido = document.createTextNode(c);
var contenido=document.createElement("input");
contenido.type="text";
contenido.name="posicion[]";
contenido.id="posicion";
contenido.size="2";
contenido.className="enumerarinsumo"
//contenido.disabled=true;

var celda2 = document.createElement("td");
celda2.width="313";
var contenido2 = document.createTextNode("Producto:");

var celda3 = document.createElement("td");
celda3.width="70";
celda3.align="center";
var contenido3 = document.createTextNode("Cantidad:");

var celda4 = document.createElement("td");
celda4.width="70";
celda4.align="center";
//var contenido4 = document.createElement("input");
//contenido4.name="delete";
//contenido4.type="button";
//contenido4.value="quitar";
//contenido4.onclick = function(){borraNodo("borrado")};
var contenido4 =document.createElement("button");
contenido4.name="delete";
contenido4.className="botondelinsumo"
contenido4.title="borrar insumo";
contenido4.alt="borrar insumo";

var nodotabla="borrado"+c;
contenido4.onclick = function(){borraNodo(nodotabla)};
//contenido4.type="button";
var imagen4=document.createElement("img");
imagen4.src="../Imagen/Insumos_img/cancel.gif";
imagen4.border="0";
imagen4.width="16";
imagen4.height="16";

tabla.appendChild(cuerpo);//<tbody> solo una vez se imprime

cuerpo.appendChild(linea);//<tr>
//******************************
linea.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido
contenido4.appendChild(imagen4);

var linea2 = document.createElement("tr");//fila 2*********************
linea2.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
var contenido2 = document.createElement('input');
contenido2.type = "text";
contenido2.name = "txproducto[]";
contenido2.id = "txproducto";
contenido2.size="50";
contenido2.className="txtBoxStyle3"

var celda3 = document.createElement("td");
celda3.align="center";
var contenido3 = document.createElement('input');
contenido3.type = "text";
contenido3.name = "txcantidad[]";
contenido3.id = "txcantidad";
contenido3.maxlength="2";
contenido3.size="5";
contenido3.className="txtBoxStyle3";
//onKeyPress="return numbersonly(this, event)"
var noletras=new Function("return validar2(event)");
contenido3.onkeypress=noletras;

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea2);//<tr>
//******************************
linea2.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea2.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea2.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea2.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea3 = document.createElement("tr");//fila 3*********************
linea3.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
var contenido2 = document.createTextNode('Justificación:');

var celda3 = document.createElement("td");
var contenido3 = document.createTextNode(' ');

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea3);//<tr>
//******************************
linea3.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea3.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea3.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea3.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea4 = document.createElement("tr");//fila 4*********************
linea4.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('textarea');
contenido2.name="txjustificado[]";
contenido2.id="txjustificado";
contenido2.cols="60";
contenido2.rows="4";
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea4);//<tr>

linea4.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea4.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

var linea5 = document.createElement("tr");//fila 5*********************
linea5.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
var contenido2 = document.createTextNode('Proveedor:');

var celda3 = document.createElement("td");
var contenido3 = document.createTextNode(' ');

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode(" ");

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea5);//<tr>
//******************************
linea5.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea5.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

linea5.appendChild(celda3);//<td>
celda3.appendChild(contenido3);//contenido

linea5.appendChild(celda4);//<td>
celda4.appendChild(contenido4);//contenido

var linea6 = document.createElement("tr");//fila 6*********************
linea6.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('select');
contenido2.name = "proveedores"
//contenido2.options[1] = new Option('text zero', 'value0');
//contenido2.setAttribute("proveedores","1","1");
contenido2.options[0] = new Option('', '');
contenido2.options[1] = new Option('Distribuidora Papelera del Golfo SA de CV', 'Distribuidora Papelera del Golfo SA de CV');contenido2.options[2] = new Option('Ofix SA de CV', 'Ofix SA de CV');contenido2.options[3] = new Option('Office Depot SA de CV', 'Office Depot SA de CV');contenido2.options[4] = new Option('Recycling System', 'Recycling System');contenido2.options[5] = new Option('Arleth Baltazar Silva', 'Arleth Baltazar Silva');contenido2.options[6] = new Option('Moisés Lazo Torres', 'Moisés Lazo Torres');
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea6);//<tr>

linea6.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea6.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

var linea7 = document.createElement("tr");//fila 7*********************
linea7.className="texforms";

var celda = document.createElement("td");
var contenido = document.createTextNode(" ");

var celda2 = document.createElement("td");
celda2.colSpan="3";
var contenido2 = document.createElement('textarea');
contenido2.cols="60";
contenido2.rows="4";
contenido2.className="areatx";

//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea7);//<tr>

linea7.appendChild(celda);//<td>
celda.appendChild(contenido);//contenido

linea7.appendChild(celda2);//<td>
celda2.appendChild(contenido2);//contenido

document.getElementById(lugar).appendChild(tabla);

c=c+1;
//funcion posicionar
posicionar();

}

function borraNodo(id)
{
//alert(id);
yo=document.getElementById(id);
yo.parentNode.removeChild(yo);
//*****************************
//var tabla=document.getElementById("borrado");
//tabla.parentNode.parentNode.removeChild(tabla.pare ntNode);
}

lo que supuse es que cada tablas debe tener un id diferente
en este caso
borrado0
borrado1
.
.
etc

lo unico que hice y me esta resultando efectivo
es que agregue una variable var c=0 fuera de funcion

en la parte id de la tablas puse tabla.id="borrado"+c;
en la parte donde llamo la funcion para borrar
puse

var nodotabla="borrado"+c;
contenido4.onclick = function(){borraNodo(nodotabla)};

chalchis · #5 (**permalink**) 18/11/2005, 09:47

Hola nuevamente como ven al crear la tabla se crean campos input
en una de ellas quiero validar que solo se admitan numeros
el scrip funciona bien en ie, mozilla y firefox cuando lo estoy usando
en una tabla estatica el detalle es que en la creacion de la tablas
dinamicas quiero meter ese script o mas bien invocarlo

ya lo probe y en ie funciona de maravilla pero en mozilla y fire fox me dice
que el event no esta definido que puedo hacer este es el script

asi lo invoco desde una tabla estatica

function validar2(evt)
{
//alert(evt);
evt = (evt) ? evt : event
var key = (evt.which) ? evt.which : evt.keyCode;
if (key > 47 && key < 58 || key == 8 || key == 37 || key == 39 || key == 46 || key == 9) { return true;}
else {return false;}
}

<input type="text" name="txcantidad[]" id="txcantidad" size="5" maxlength="2" class="txtBoxStyle3" onKeyPress="return validar2(event)">

aqui funciona bien ahora si esa funcion la queremos llamar desde donde creo la tabla dinamica en este caso yo lo quise hacer asi

asi lo declare
var noletras=new Function("return validar2(event)"); contenido3.onkeypress=noletras;

en ie funciona pero en mozilla y firefox nop
dice que event no esta definido que puedo
hacer??

espero sus comentarios
saludos

y gracias por las contestaciones

programeitor · #6 (**permalink**) 18/11/2005, 14:40

Hola, caricatos, en el ejemplo de este hilo 'id' ,es un objeto.

Cita:

Iniciado por chalchis

contenido4.onclick = function(){borraNodo(this)};

Al parecer ,ha estado probando diferentes formas de conseguirlo. Por otra parte, ahora me explico por que no funcionaba el script, que al verlo, me parecio extraño... supongo ,que a ti, te habra pasado lo mismo al ver el mio.

Como decia, al ser 'id' un objeto, la funcion podria quedar asi:

function borraNodo(id)
{
document.getElementById('aqui').removeChild(id.parentNode.parentNode.parentNode.parentNode)
}

y no habria que cambiar nada mas, por lo visto. Un Saludo.

caricatos · #7 (**permalink**) 18/11/2005, 16:31

Bueno, es indiscutible que hay un lío, pero...

El tipo de función que planteas es demasiado rebuscada (no lo puedes negar)
...
Es que removeChild solo borra un hijo directo, y el elemento que he visto con id="aqui" solo tiene como hijo un texto:
<td align="center" valign="middle" bgcolor="#F1F5FA" id="aqui">  </td>

La ruta ascendente que empieza por ese objeto nunca llegaría a un nodo hijo de aquí...

Espero no haberme liado más de la cuenta... pero lo que importa es que ya haya solución

chalchis: para preguntas distintas te recomiendo que abras temas nuevos... Sé que tu nuevo problema hay gente capacitada para responderlo (pero es un asunto en el que no me he metido...

)

Saludos

programeitor · #8 (**permalink**) 19/11/2005, 07:47

¿ Lo has probado, caricatos ?

"aqui" es el contenedor de las tablas creadas dinamicamente.

caricatos · #9 (**permalink**) 19/11/2005, 10:14

Hola:

programeitor: Es posible que tengas razón, pero insisto que es muy rebuscado... (¡con lo fácil que lo hago yo...

!)

Saludos

programeitor · #10 (**permalink**) 19/11/2005, 10:32

¿ Rebuscado ? , no se, va al grano y no hay que identificar las nuevas tablas.

caricatos · #11 (**permalink**) 19/11/2005, 10:45

Hola:

id.parentNode.parentNode.parentNode.parentNode

A eso llamo rebuscado... aunque vaya al grano...¿?
¡Por cierto...!, ¿y si alguien duplicase el id? (no se debe pero se puede...)

Saludos

programeitor · #12 (**permalink**) 21/11/2005, 08:10

Pues esta muy claro:

id.parentNode.parentNode.parentNode.parentNode
<input><td><tr><tbody><table>

Cita:

Iniciado por caricatos

¡Por cierto...!, ¿y si alguien duplicase el id? (no se debe pero se puede...)

No entiendo tu preguta. Al pulsar en un boton borrar, éste, se manda a si mismo como argumento, la funcion quiere borrar precisamente el "maxParent" donde se encuentra alojado ese boton en particular. ,no hay 'id', que pueda duplicarse. Me temo que estas "argumentando sobre el otro hilo", en que si se creaban elementos con 'id'.

Lo ideal del 'dom' ,es no redefinir variables o nuevos objetos que ya existen y estan catalogados ,ademas de que son prefectamente accesibles, con el consiguiente ahorro de recursos. Muchas veces con la utilizacion de 'id' se tiende ,casi ,a trasladar el 'dom' a otra matriz o matrizes, tal vez, porque su tratamiento con nombres mas cortos se hace mas facil y legible.

Desde luego, no es util su utilizacion directa en todos los casos, sobre todo cuando nos vamos a referir a elementos que no tienen ningun 'parentesco' con el llamante, para éste caso, si es aconsejable el uso de identificadores. ,aunque no lo hemos de negar, tambien seria accesible desde el arbol de elementos ,pero en este caso no seria aconsejable, dado el caracter movil de las rutas entre elementos no emparentados.

Saludos.