Foros del Web » Programando para Internet » Javascript »

appendChild TR en Internet Explorer IE

 Estas en el tema de appendChild TR en Internet Explorer IE en el foro de Javascript en Foros del Web. Tengo el siguiente codigo que funciona bien para FireFox pero no en IE, la versión de IE es 7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
  #1 (permalink)  
Antiguo 08/09/2007, 19:55
 
Fecha de Ingreso: abril-2007
Ubicación: España
Mensajes: 19
Antigüedad: 17 años
Puntos: 1
Pregunta appendChild TR en Internet Explorer IE
Tengo el siguiente codigo que funciona bien para FireFox pero no en IE, la versión de IE es 7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
var linea = 1;
function agregar() {
alert(linea);
var tr = document.createElement('tr');

var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');

var input1 = document.createElement('input');
input1.setAttribute('value','1');
input1.setAttribute('name','ser_'+linea);
var input2 = document.createElement('input');
input2.setAttribute('value','2');
input2.setAttribute('name','tit_'+linea);

var input3 = document.createElement('input');
input3.setAttribute('value','3');
input3.setAttribute('name','int_'+linea);

var input4 = document.createElement('input');
input4.setAttribute('value','4');
input4.setAttribute('name','apo_'+linea);

var inputh = document.createElement('input');
inputh.setAttribute('type','hidden');
inputh.setAttribute('name','id_'+linea);
inputh.setAttribute('value','5');

td1.appendChild(input1);
td2.appendChild(input2);
td3.appendChild(input3);
td4.appendChild(input4);
document.Prueba.appendChild(inputh);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
document.getElementById('seccion1').appendChild(tr );
alert(tr.tagName);
linea++;
}
//-->
</script>

<body>
<form action="" method="post" name="Prueba">
<table id="seccion1" width="500" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="vertab" width="48" align="center"></td>
<td class="vertab" width="264" align="center">Designaci&oacute;n</td>
<td class="vertab" width="121" align="center">P/N</td>
<td class="vertab" width="66" align="center">Cant.</td>
</tr>
</table>
<a href="javascript:agregar();">a</a>
</form>
</body>
</html>

Supuestamente el codigo debe funcionar en IE, pero no es así.
Agradezco por la ayuda que puedan brindarme.

Saludos,
Cristian
  #2 (permalink)  
Antiguo 09/09/2007, 01:46
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: appendChild TR en Internet Explorer IE
Hola:

Aunque no se indique en tu código, todos los navegadores insertan detrás de un tag table, un tag tbody, así que estás intentando insertar una fila en una tabla sin contar con ese tbody...

Prueba insertando en tu tabla, antes detrás del tag table y antes de cualquier fila un tag tbody e inserta en él objeto "tr" que has creado:

<table>
<tbody id="seccion1" >
<tr>
<!-- el resti de tu tabla. -->

Creo que también existen los métodos insertRow e insertCell, pero mejor no liarnos...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 09/09/2007, 03:31
 
Fecha de Ingreso: abril-2007
Ubicación: España
Mensajes: 19
Antigüedad: 17 años
Puntos: 1
Re: appendChild TR en Internet Explorer IE
Es correcta su sugerencia.
No se puede insertar sobre un objeto Table directamente, sino que se debe especificar un <tbody> y sobe él hacer la inserción de la <TR>.
Muchas gracias, estos los tips que le consumen el tiempo ya que funciona en un navegador y el otro no, .

Saludos,
Cristian
  #4 (permalink)  
Antiguo 10/09/2007, 14:27
Avatar de oswalgogra  
Fecha de Ingreso: septiembre-2007
Ubicación: En algún lugar del territorio Colombiano
Mensajes: 140
Antigüedad: 16 años, 8 meses
Puntos: 5
Re: appendChild TR en Internet Explorer IE
Hola, cómo les va?
Estoy desarrollando una aplicación y quiero hacer un menú muy sencillo que se inserte en la página cuando esta se cargue.
Había intentado agregarlo por medio de la llamada de una función cuando se cargara la página, pero veo que los nodos de texto son expresamente para agregar texto a la página, no código:

function menu()
{
capa = document.createElement("div");
// en la variable menú agrego el código de la tabla
codigo_menu="<table border=1 align=center title='Menu de Navegación'><tr><td><a href='index.html'>Inicio</a></td><td><a href='reg_facturas.php'>Registrar Facturas</a></td><td><a href='admin_medic.php'>Administrar Medicamentos</a></td><td><a href='cons_prod.html'>Consultar Medicamentos</a></td></tr></table>";
menu = document.createTextNode(codigo_menu);
capa.appendChild(menu);
document.body.appendChild(capa);
alert(menu);
}
No se debe crear ninguna tabla? solo <tr> y <td> ?
  #5 (permalink)  
Antiguo 08/10/2008, 14:49
 
Fecha de Ingreso: noviembre-2007
Mensajes: 6
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: appendChild TR en Internet Explorer IE
hola a todos, estoy teniendo un problema similar con un código que armé de varias fuentes. Con Fire fox me funciona, pero en IE no. Alguien podría ayudarme? anexo el codigo que tengo.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<form name="Prueba">
<table id="seccion0" width="500" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="vertab" width="48" align="center">ID</td>
<td class="vertab" width="264" align="center">Designaci&oacute;n</td>
<td class="vertab" width="121" align="center">P/N</td>
<td class="vertab" width="66" align="center">Cant.</td>
</tr>
</table>
<table id="seccion1" width="500" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<DIV id="cuadrosTexto">
<tr>
<td class="vertab" width="48" align="center">ID</td>
<td class="vertab" width="264" align="center">Designaci&oacute;n</td>
<td class="vertab" width="121" align="center">P/N</td>
<td class="vertab" width="66" align="center">Cant.</td>
</tr>
</DIV>
</table>
<a href="javascript:agregar();">agregar</a>
</form>
<script language="JavaScript" >
<!--
var linea = 1;
var col = 1;
function agregar() {
//alert(linea);
var divContenedor = document.getElementById("cuadrosTexto");
var grp = document.createElement("span");
var tr = document.createElement('tr');


var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');


var input1 = document.createElement('input');
input1.setAttribute('value','1');
input1.setAttribute('name','ser_'+linea+'_'+col);
input1.setAttribute('readOnly','true');
col++;
var input2 = document.createElement('input');
input2.setAttribute('value','2');
input2.setAttribute('name','tit_'+linea+'_'+col);
input2.setAttribute('readOnly','true');
col++;
var input3 = document.createElement('input');
input3.setAttribute('value','3');
input3.setAttribute('name','int_'+linea+'_'+col);
input3.setAttribute('readOnly','true');
col++;
var input4 = document.createElement('input');
input4.setAttribute('value','4');
input4.setAttribute('name','apo_'+linea+'_'+col);
input4.setAttribute('readOnly','true');
col++;
/*var inputh = document.createElement('input');
inputh.setAttribute('type','hidden');
inputh.setAttribute('name','id_'+linea);
inputh.setAttribute('value','5');
*/
var btnRemove = document.createElement("input");
btnRemove.setAttribute('type','button');
btnRemove.setAttribute('value','Quitar Cuadro');
btnRemove.setAttribute('id','quitar');
btnRemove.setAttribute('onclick','quitarboton(this )');

td1.appendChild(input1);
td2.appendChild(input2);
td3.appendChild(input3);
td4.appendChild(input4);
td5.appendChild(btnRemove);

//document.Prueba.appendChild(inputh);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
//document.getElementById('seccion1').appendChild(tr );
grp.appendChild(tr);
divContenedor.appendChild(grp);
//alert(tr.tagName);
linea++;
col=1;
}

function quitarboton(elemento) {
var elem = elemento.parentNode;
var elemParent = elem.parentNode;
elemParent.parentNode.removeChild(elemParent);
}
-->
</script>
</body>
</html>
  #6 (permalink)  
Antiguo 19/11/2008, 12:07
Avatar de jgabrielsinner10  
Fecha de Ingreso: octubre-2008
Mensajes: 26
Antigüedad: 15 años, 6 meses
Puntos: 0
Pregunta de Nuevo: appendChild TR en Internet Explorer IE
Estoy haciendo una aplicación con una función muy parecida a la de este código expuesto arriba, quisiera en verdad saber por qué en Internet Explorer no se ejecuta de igual forma que en otros navegadores. y de que forma se puede adaptar tanto a este navegardor como a otros. muchas gracias de antemano...

Al parecer la función agregar se ejecuta perfectamente sin errores, pero, lo que pasa es que no se ven las filas que se van agragando, ojo, esto sucede solo en Internet Explorer...

Cita:
Iniciado por angel3d3 Ver Mensaje
hola a todos, estoy teniendo un problema similar con un código que armé de varias fuentes. Con Fire fox me funciona, pero en IE no. Alguien podría ayudarme? anexo el codigo que tengo.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<form name="Prueba">
<table id="seccion0" width="500" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="vertab" width="48" align="center">ID</td>
<td class="vertab" width="264" align="center">Designaci&oacute;n</td>
<td class="vertab" width="121" align="center">P/N</td>
<td class="vertab" width="66" align="center">Cant.</td>
</tr>
</table>
<table id="seccion1" width="500" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<DIV id="cuadrosTexto">
<tr>
<td class="vertab" width="48" align="center">ID</td>
<td class="vertab" width="264" align="center">Designaci&oacute;n</td>
<td class="vertab" width="121" align="center">P/N</td>
<td class="vertab" width="66" align="center">Cant.</td>
</tr>
</DIV>
</table>
<a href="javascript:agregar();">agregar</a>
</form>
<script language="JavaScript" >
<!--
var linea = 1;
var col = 1;
function agregar() {
//alert(linea);
var divContenedor = document.getElementById("cuadrosTexto");
var grp = document.createElement("span");
var tr = document.createElement('tr');


var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');


var input1 = document.createElement('input');
input1.setAttribute('value','1');
input1.setAttribute('name','ser_'+linea+'_'+col);
input1.setAttribute('readOnly','true');
col++;
var input2 = document.createElement('input');
input2.setAttribute('value','2');
input2.setAttribute('name','tit_'+linea+'_'+col);
input2.setAttribute('readOnly','true');
col++;
var input3 = document.createElement('input');
input3.setAttribute('value','3');
input3.setAttribute('name','int_'+linea+'_'+col);
input3.setAttribute('readOnly','true');
col++;
var input4 = document.createElement('input');
input4.setAttribute('value','4');
input4.setAttribute('name','apo_'+linea+'_'+col);
input4.setAttribute('readOnly','true');
col++;
/*var inputh = document.createElement('input');
inputh.setAttribute('type','hidden');
inputh.setAttribute('name','id_'+linea);
inputh.setAttribute('value','5');
*/
var btnRemove = document.createElement("input");
btnRemove.setAttribute('type','button');
btnRemove.setAttribute('value','Quitar Cuadro');
btnRemove.setAttribute('id','quitar');
btnRemove.setAttribute('onclick','quitarboton(this )');

td1.appendChild(input1);
td2.appendChild(input2);
td3.appendChild(input3);
td4.appendChild(input4);
td5.appendChild(btnRemove);

//document.Prueba.appendChild(inputh);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
//document.getElementById('seccion1').appendChild(tr );
grp.appendChild(tr);
divContenedor.appendChild(grp);
//alert(tr.tagName);
linea++;
col=1;
}

function quitarboton(elemento) {
var elem = elemento.parentNode;
var elemParent = elem.parentNode;
elemParent.parentNode.removeChild(elemParent);
}
-->
</script>
</body>
</html>
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

SíEste tema le ha gustado a 2 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:08.