¿Porque funciona en Firefox y no en IE?

[Lord of freaks]

Alguien me puede ayudar a que funcione en IE (la mayoría de mis usuarios es lo que usan)

Código PHP:

  function suma(lugar)    {
    // Declaración de variables
    var miCapa = document.getElementById(lugar);
    var tabla = document.createElement("table");
    // Fila de los titulos
    var fila = document.createElement("tr");
        var dorsal = document.createElement('td');
        var nombre = document.createElement("td");
        var demarcacion = document.createElement("td");
        var valoracion = document.createElement("td");
    // Fila de los valores
    var fila2 = document.createElement("tr");
        var vdorsal = document.createElement("td");
        var vnombre = document.createElement("td");
        var vdemarcacion = document.createElement("td");
            var sdemarcacion = document.createElement("select");
                var option1 = document.createElement("option");
                var option2 = document.createElement("option");
                var option3 = document.createElement("option");
                var option4 = document.createElement("option");
                var option5 = document.createElement("option");
                var option6 = document.createElement("option");
                var option7 = document.createElement("option");
                var option8 = document.createElement("option");
                var option9 = document.createElement("option");
        var vvaloracion = document.createElement("td");
            var svaloracion = document.createElement("select");
                var descartar = document.createElement("option");
                var seguir = document.createElement("option");
                var fichar = document.createElement("option");
    // Fila del comentario
    var fila3 = document.createElement("tr");
        var informe = document.createElement("td");
    
    // Atributos varios como clases y colspans
    dorsal.setAttribute("class","alineacion_titulo");
    nombre.setAttribute("class","alineacion_titulo");
    demarcacion.setAttribute("class","alineacion_titulo");
    valoracion.setAttribute("class","alineacion_titulo");
    
    informe.setAttribute("colspan","4");
    
    sdemarcacion.setAttribute("name","demarcacion");
    option1.setAttribute("name","portero");
    option2.setAttribute("name","lateral izquierdo");
    option3.setAttribute("name","lateral derecho");
    option4.setAttribute("name","central");
    option5.setAttribute("name","medio banda derecha");
    option6.setAttribute("name","medio banda izquierda");
    option7.setAttribute("name","medio centro");
    option8.setAttribute("name","media punta");
    option9.setAttribute("name","delantero");
    
    svaloracion.setAttribute("name","valoracion");
    svaloracion.setAttribute("class","valoracion");
    
    descartar.setAttribute("name","descartar");
    seguir.setAttribute("name","seguir");
    fichar.setAttribute("name","fichar");
    
    // valores que continen las celdas
    dorsal.innerHTML = "Dorsal";
    nombre.innerHTML = "Nombre";
    demarcacion.innerHTML = "Demarcación";
    valoracion.innerHTML = "Valoración";
        
    vdorsal.innerHTML = "<input type='text' class='dorsal' name='dorsal_"+ lugar + i + "'>";
    vnombre.innerHTML = "<input type='text' name='nombre_"+ lugar + i + "'>";
    vdemarcacion.innerHTML = "hola";
    vvaloracion.innerHTML = "hola";
    
    option1.innerHTML = "Portero";
    option2.innerHTML = "lateral izquierdo";
    option3.innerHTML = "lateral derecho";
    option4.innerHTML = "central";
    option5.innerHTML = "medio banda derecha";
    option6.innerHTML = "medio banda izquierda";
    option7.innerHTML = "medio centro";
    option8.innerHTML = "media punta";
    option9.innerHTML = "delantero";
    
    descartar.innerHTML = "descartar";
    seguir.innerHTML = "seguir";
    fichar.innerHTML = "fichar";
    
    informe.innerHTML = '<textarea class="informe_alineacion" name="informe"></textarea>';
    
    // Creacion de la tabla
            fila.appendChild(dorsal);
            fila.appendChild(nombre);
            fila.appendChild(demarcacion);
            fila.appendChild(valoracion);
        tabla.appendChild(fila);
            fila2.appendChild(vdorsal);
            fila2.appendChild(vnombre);
                sdemarcacion.appendChild(option1);
                sdemarcacion.appendChild(option2);
                sdemarcacion.appendChild(option3);
                sdemarcacion.appendChild(option4);
                sdemarcacion.appendChild(option5);
                sdemarcacion.appendChild(option6);
                sdemarcacion.appendChild(option7);
                sdemarcacion.appendChild(option8);
                sdemarcacion.appendChild(option9);
            fila2.appendChild(sdemarcacion);
            fila2.appendChild(vdemarcacion);
                svaloracion.appendChild(descartar);
                svaloracion.appendChild(seguir);
                svaloracion.appendChild(fichar);
            fila2.appendChild(svaloracion);
            fila2.appendChild(vvaloracion);
        tabla.appendChild(fila2);
            fila3.appendChild(informe);
        tabla.appendChild(fila3);
    miCapa.appendChild(tabla);
    i= i + 1;
} 
   

[angsanchez]

¿Qué tal si dices qué es lo que falla?

[Lord of freaks]

Ups sorry

falla que en firefox crea la tabla y en IE no hace absolutamente nada cuando le das al boton

Un saludo

[SiR.CARAJ0DIDA]

LOL pero semejante codigo.... si lo haces con innerHTML te ahorras 50 lineas, tambien existen los ciclos FOR...

[tunait]

Bueno, al fin me encuentro con alguien a quien le sucede lo mismo que a mi.
Nunca he logrado crear una tabla usando el DOM que funcione en Explorer. En realidad la crea si luego le pides que te muestre el innerHTML de body pero no se visualiza por ningún lado. Por eso siempre he tenido que hacer estas cosas con div

[caricatos]

Hola:

Hice una prueba sencilla que muestra una tabla con el DOM:

Código:

<html>
	<head>
		<title>
			crear tablas con DOM
		</title>
		<script type="text/javascript">
			function suma(lugar)    {
				var tabla = document.createElement("table");
				var cuerpo = document.createElement("tbody");
				var linea = document.createElement("tr");
				var celda = document.createElement("td");
				var contenido = document.createTextNode("prueba");
				celda.appendChild(contenido);
				linea.appendChild(celda);
				cuerpo.appendChild(linea);
				tabla.appendChild(cuerpo);
				document.getElementById(lugar).appendChild(tabla);
			}
		</script>
	</head>
	<body >
		<button onclick="suma('aqui')" >crear</button>
		<div id="aqui"></div>
	</body>
</html>

Me parece que el secreto está en colgar las filas en un elemento tbody (supongo que también podría ser tfoot o thead)

Saludos

[chalchis]

Hola caricatos no soy expereto en esto de crear cosas dinamicas
a ver si me podrias acesorar usando tu script previo como le hago
para agregar mas celdas y mas celdas.

espero tus comentarios, saludos

[caricatos]

Hola chalchis:

Trataré de ayudarte.

La secuencia para crear una tabla es crear una etiqueta table otra etiqueta tbody dentro de la anterior y dentro insertar las filas y celdas que sean necesarias... Con el código que tienes, prueba crear una tabla sencilla y después, según los resultados intentaremos avanzar...

Saludos

[chalchis]

Esto es lo que estroy tratando de hacer
hay varias dudas que tengo aqui te va mi codigo
mi intencion es replicar el formulario estatico por varios mas

tengo dudad sobre:

en lugar del createTextNode que otra funcion o propiedad
puedo usar para que no me imprima texto si no codigo htm

la otra es como puedo usar el colspan si te fijas en donde dice
justificacion2 no se hace el colspan.

y la otra como podria yo eliminar la tablas a travez de un checkbox o un boton

espero tus comentarios y gracias.
saludos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>prueba</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";
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.createTextNode("&nbsp;");

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


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("&nbsp;");

//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('&nbsp;');

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

//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.createTextNode('Justificación2');

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

var celda4 = document.createElement("td");
var contenido4 = document.createTextNode("&nbsp;");
//tabla.appendChild(cuerpo);//<tbody>
cuerpo.appendChild(linea4);//<tr>

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

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




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

</script>
</head>
<!--- Inicia Tabla de alinenamiento de pagina --->
<body class="tabla" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table width="477" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#a3a28e" height=1></td>
</tr>
<tr>
<td bgcolor="#F1F5FA" class="texforms">
<button name="boton_2" type="button" title="terminar examen" alt="terminar examen" class="botonenviar" onClick="suma('aqui')">
sumar
</button>
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#F1F5FA" id="aqui">
<form name="formulario" method="post" onSubmit="return verificar(this)" action="insumos.php">
<table width="477" border="1" align="center" cellpadding="0" cellspacing="1" class='texsitio' >
<tbody >
<tr bgcolor="#CCCCCC">
<td width="19" class="texforms">#</td>
<td width="313" class="texforms">Producto</td>
<td width="70" class="texforms"><div align="center">Cantidad</div></td>
<td width="70" class="texforms">&nbsp;</td>
</tr>
<tr>
<td class="texforms">&nbsp;</td>
<td class="texforms"><input type="text" name="textfield2" size="50" class="txtBoxStyle3">
<div align="center">
</div></td>
<td class="texforms"><div align="center">
<input type="text" name="textfield" size="5" class="txtBoxStyle3">
</div></td>
<td class="texforms"><div align="center">
<input type="checkbox" name="checkbox" value="checkbox">
</div></td>
</tr>
<tr>
<td class="texforms">&nbsp;</td>
<td class="texforms">Justificacion:</td>
<td class="texforms">&nbsp;</td>
<td class="texforms">&nbsp;</td>
</tr>
<tr>
<td class="texforms">&nbsp;</td>
<td colspan="3" class="texforms">
<textarea name="txtjustificado" rows="4" cols="60" class="areatx"></textarea>
</td>
</tr>
<tr>
<td class="texforms">&nbsp;</td>
<td class="texforms">Proveedor:</td>
<td class="texforms">&nbsp;</td>
<td class="texforms">&nbsp;</td>
</tr>
<tr>
<td class="texforms">&nbsp;</td>
<td colspan="3" class="texforms">
<select name="lista_proveedores" class="areatx">
<option value=""></option>
<option value="Distribuidora Papelera del Golfo SA de CV">Distribuidora Papelera del Golfo SA de CV</option><option value="Ofix SA de CV">Ofix SA de CV</option><option value="Office Depot SA de CV">Office Depot SA de CV</option><option value="Recycling System">Recycling System</option><option value="Arleth Baltazar Silva">Arleth Baltazar Silva</option><option value="Moisés Lazo Torres">Moisés Lazo Torres</option> <option value="Otro">Otro</option>
</select>
</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td colspan="4">
<textarea name="txtproveedor" rows="4" cols="60" class="areatx"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>

<td bgcolor="#a3a28e" height=1></td>
</tr>
</table>
</body>
</html>

[chalchis]

es colSpan la "S" en mayusculas aun me falta los otros puntos que
comente...saludos

[caricatos]

Hola:

Sobre poner etiquetas en vez de texto es muy sencillo, en vez de poner createTextNode hay que poner createElement("div")... (Lo del div es un ejemplo, puedes poner cualquier otra etiqueta html... y por último usar donde quieres texto el método createTextNode()

Para eliminar nodos existe el método removeChild que se aplica al nodo superior del que piensas borrar... En tal caso te recomiendo que uses un atributo id (para ubicar el nodo con facilidad) y crear una función que se le pase como parámetro ese id...

Por ejemplo, con una tabla definida así:

var tabla = document.createElement("table");
tabla.id = "borrador";
...

una funcióncilla sería:

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

Espero que te sirva.

Saludos

[chalchis]

Quise poner
document.createElement("&nbsp;");
pero no imprimer el espacio
porque si uso
document.createTextNode("&nbsp;");
se imprime pero para que se vea
que debo hacer

espero tus comentarios
saludos

[chalchis]

var contenido4 = document.createElement("input");
contenido4.name = "delete";
contenido4.type = "button";
contenido4.value = "Borrar";
contenido4.onClick="borraNodo(this)";

pero no me funciona

saludos
espero tus comentarios y gracias
por la ayuda

[chalchis]

ya logre llamar la funcion
pero no me borra la tabla

a la tabla le puse
var tabla = document.createElement("table");
tabla.border="1";
tabla.width="477";
tabla.id="borrar";


var contenido4 = document.createElement("input");
contenido4.type="button";
contenido4.value="borrar";
contenido4.onclick = function(){borraNodo(this)};

y en funcion de borrado me sale error dice que hace falta un
objeto

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

[caricatos]

Hola chalchis:

Vas progresando

Te faltó pasar el id en la función...

contenido4.onclick = function(){borraNodo("borrar")};

Si el id de la tabla es borrar (la cadena "borrar"), es ese el parámetro que le tiene que llegar a la función.

Saludos

[chalchis]

Gracias caricatos ya me salio ah porcierto tambien funciona en mozilla
y firefox
ahora tengo otra dudota como podria enumerar
por cada tabla que se crea poner un numero
1
2
3
y el detalle seria como reordenar cuando borre alguna
tabla

algun tipo de contador

saludos
te agradesco la ayuda

espero tus comentarios

[caricatos]

Hola:

Esto nuevo, puede ser algo más complicado...

Las tablas podrías ponerlas en un array, y la enumeración sería el mismo índice...

Luego, para el borrado, en vez de renumerar, pienso que sería más fácil poner el elemento del array a false... (solo es una idea...)

var tablas = new Array();
...

tablas[tablas.length] = document.createElement("table");

... con eso sabes que el número de tablas creadas dinámicamente es la longitud del array... aunque con el borrado habría que hacer malabares... aunque también dependería de la importancia que quieres darle a ese índice (también puede tenerse otro contador en otra variable...

Tal vez sea mejor crear un tema nuevo si el planteamiento deja de ser el original...

Saludos

[chalchis]

pues mira el objetivo es namas para visualizar cuantas tablas
se estan creando pero si tienes razon puede que sea
mas complicado supongo tengo una pregunta

yo normalmente uso imagenes dentro de un input botton
de esta forma
<button name="boton_1" type="button" onClick="suma('aqui')">
<img src="../Imagen/Insumos_img/nuevo.gif" border="0" width="22" height="22">
</button>

como podria crearlo asi
var contenido4 = document.createElement("input");
contenido4.name="delete";
contenido4.type="button";
contenido4.value="quitar";
contenido4.onclick = function(){borraNodo("borrado")};

intente poner contenido4.src="imagen";
pero no resulto

sera posible crearlo con una imagen

[caricatos]

var contenido4 = document.createElement("button");
var imagen4 = document.createElement("img");
imagen4.src = "../Imagen/Insumos_img/nuevo.gif";
contenido4.type = "button";
contenido4.appendChild(imagen4);
...

Saludos

[chalchis]

Funciona excelente en firefox el detalle que en ie me marca error
dice que el objeto no acepta esta accion

[caricatos]

Hola:

Lo que no permite explorer es modificar el atributo type del botón...

Solo quita esa línea y verás que funciona bien.

Saludos

[chalchis]

gracias por tu ayuda y por aguantar a un novato..

saludos
y nuevamente gracias

[chalchis]

el borrado de la tabla que se creo funciona bien
pero le vi un detalle si tengo varias tablas
creadas y borro por decir la ultima o una antes de la ultima siempre
me borra la primera que podra ser??

espero tus comenatarios
saludos

[chalchis]

Sera que deba poner un id diferente por cada tabla que se crea
dinamicamente

[chalchis]

efectivamente deben tener id diferentes las tablas que se crean
borrado0
borrado1
.
.
.

declare una variable
fuera de la funcion
var c=0;

function suma(lugar)
{
var tabla = document.createElement("table");
tabla.border="0";
tabla.width="477";
tabla.id="borrado"+c;

y en el boton de eliminacion puse algo asi
var nodotabla="borrado"+c;
contenido4.onclick = function(){borraNodo(nodotabla)};

al final del document.getElementById(lugar).appendChild(tabla);
puse el incremento
c=c+1;

y pues funciona
espero tus comentarios
gracias

saludos

[chalchis]

hola caricatos
tengo un problema
ya que haya creado la tablas con los campos

hice este script para saber la longitud de array de un campo
var contenido=document.createElement("input");
contenido.type="text";
contenido.name="posicion[]";
contenido.id="posicion";
contenido.size="2";
contenido.className="txtBoxStyle3"

este es el script
function posicionar()
{
alert(document.forms.formulario.txproducto.length) ;
}

el explorer corre bien pero en firefox y mozilla
nada que estara pasando, no esta reconociendo el arreglo de inputs

[chalchis]

declare esto para que el campo solo admita
numeros
function validar2(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;}
}

en el objeto declare
var noletras=new Function("return validar2(event);");
contenido3.onkeypress=noletras;

funciona en explorer

pero en mozilla y en firefox no funciona