JavaScript - Código incompatible con IE

Código incompatible con IE

Publicado por yazo (1 intervención) el 24/01/2008 16:13:27

Hola a todos:

El siguiente código me da errores con IE, aunque en firefox funciona correctamente:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(id, orden, detalles, cantidad, total) {
//Sumanos uno al contador
cont++;

tab = document.getElementById('tabla');

//Añadimos una nueva fila
fila = tab.appendChild(document.createElement('tr'));

//Input Id
celdaorden = fila.appendChild(document.createElement('td'));
id = celdaorden.appendChild(document.createElement('input'));
id.type='hidden';
id.name='id'+cont;
id.id='id'+cont;
id.value = id;

//Input Orden
orden = celdaorden.appendChild(document.createElement('input'));
orden.style.width = '50px';
orden.name='orden'+cont;
orden.id='orden'+cont;
orden.value = orden;

//Input detalles
celdadetalles = fila.appendChild(document.createElement('td'));
detalles = celdadetalles.appendChild(document.createElement('input'));
detalles.style.width = '100%';
detalles.name='detalles'+cont;
detalles.id='detalles'+cont;
detalles.value = detalles;

//Input Cantidad
celdacantidad = fila.appendChild(document.createElement('td'));
cantidad = celdacantidad.appendChild(document.createElement('input'));
cantidad.style.width = '50px';
cantidad.name='cantidad'+cont;
cantidad.id='cantidad'+cont;
cantidad.value = cantidad;

//Input tarifa
celdatarifa = fila.appendChild(document.createElement('td'));
tarifa = celdatarifa.appendChild(document.createElement('input'));
tarifa.style.width = '100px';
tarifa.name='tarifa'+cont;
tarifa.id='tarifa'+cont;
tarifa.value = tarifa;

//Input Total
celdatotal = fila.appendChild(document.createElement('td'));
total = celdatotal.appendChild(document.createElement('input'));
total.style.width = '100px';
total.name='total'+cont;
total.id='total'+cont;
total.value = total;

//Boton Borrar
celdaborrar = fila.appendChild(document.createElement('td'));
borrar = celdaborrar.appendChild(document.createElement('input'));
borrar.type='button';
borrar.name='orden'+cont;
borrar.id='orden'+cont;
borrar.value = 'Borrar';
borrar.onclick=function() {
tab = document.getElementById('tabla');
padre = this.parentNode.parentNode;
tab.removeChild(padre);

//Restamos uno al contador
cont--;

//actualizamos el contador
document.getElementById('contador').value = cont;
}

//actualizamos el contador
document.getElementById('contador').value = cont;
}
</script>
</head>
<body>

<?php echo "Respuesta:<br><textarea cols="50" rows="8" readonly="true">" . print_r($_POST, true) . "</textarea><br><br>"; ?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(11, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<table width='100%'>
<tr>
<td width='50' align='center'><strong>Orden</strong></td>
<td align='center'><strong>Detalles</strong></td>
<td width='50' align='center'><strong>Cantidad</strong></td>
<td width='100' align='center'><strong>Tarifa</strong></td>
<td width='100' align='center'><strong>Total</strong></td>
<td width='50'></td>
</tr>
<tbody id='tabla'>
</tbody>
</table>
<input type='hidden' value='0' name='contador' id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>

El codigo hace tres cosas, por un lado inserta filas a una tabla con unos valores dados y después actualiza un campo hidden con el valor del contador de lineas.

En firefox me funciona todo excepto el pasar valores, que me da error "[object HTMLInputElement]", el resto funciona correctamente.

En IE no guarda los estilos de los inputs, me da error en la linea type (y eso que he probado con id.setAttribute('type', 'hidden'); pero no funciona), tampoco actualiza en campo hiddden llamado contador.
¿Como podría hacer para que el codigo funcione en todos los navegadores?

¿Me podeis hechar una mano?

Muchas Gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:Código incompatible con IE

Publicado por ambrosio (11 intervenciones) el 04/02/2008 16:06:09

Que un código javascript funcione en todos los navegadores suele ser misión imposible. El "standard" no sé ni si existe, en cada sitio encuentras una cosa distinta, y cada navegador aplica los métodos, propiedades, etc. como le viene en gana. En lo que se refiere a tu código, "corrigiendo" algunas cosas he logrado que funcione en el explorer (por lo menos en el mío, que de explorer a explorer también va un abismo). El código queda así:

<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(id, orden, detalles, cantidad, total) {
//Sumanos uno al contador
cont++;

tab = document.getElementById('tabla');

//Añadimos una nueva fila
nuevafila = document.createElement('tr');
fila = tab.appendChild(nuevafila);

nuevacelda = document.createElement('td');
celdaorden = fila.appendChild(nuevacelda);

//Input Id
id = document.createElement('input');
id.setAttribute ('type', 'hidden');
id.name='id'+cont;
id.id='id'+cont;
id.value = '';
celdaorden.appendChild(id);

//Input Orden
orden = document.createElement('input');
orden.style.width = '50px';
orden.name='orden'+cont;
orden.id='orden'+cont;
orden.value = '';
celdaorden.appendChild(orden);

//Input detalles
celda = document.createElement('td');

detalles = document.createElement('input');
detalles.style.width = '100%';
detalles.name='detalles'+cont;
detalles.id='detalles'+cont;
detalles.value = '';

celdadetalles = fila.appendChild(celda);
celdadetalles.appendChild(detalles);

//Input Cantidad
celda = document.createElement('td');

cantidad = document.createElement('input');
cantidad.style.width = '50px';
cantidad.name='cantidad'+cont;
cantidad.id='cantidad'+cont;
cantidad.value = '';

celdacantidad = fila.appendChild(celda);
celdacantidad.appendChild(cantidad);

//Input tarifa
celda = document.createElement('td')

tarifa = document.createElement('input');
tarifa.style.width = '100px';
tarifa.name='tarifa'+cont;
tarifa.id='tarifa'+cont;
tarifa.value = '';

celdatarifa = fila.appendChild(celda);
celdatarifa.appendChild(tarifa);

//Input Total
celda = document.createElement('td');

total = document.createElement('input');
total.style.width = '100px';
total.name='total'+cont;
total.id='total'+cont;
total.value = '';

celdatotal = fila.appendChild(celda);
celdatotal.appendChild(total);

//Boton Borrar
celda = document.createElement('td');

borrar = document.createElement('input');
borrar.setAttribute ('type', 'button');
borrar.name='orden'+cont;
borrar.id='orden'+cont;
borrar.value = 'Borrar';
borrar.onclick=function() {
tab = document.getElementById('tabla');
padre = this.parentNode.parentNode;
tab.removeChild(padre);

//Restamos uno al contador
cont--;

//actualizamos el contador
document.getElementById('contador').value = cont;
}

celdaborrar = fila.appendChild(celda);
celdaborrar.appendChild(borrar);

//actualizamos el contador
document.getElementById('contador').value = cont;
}
</script>

Espero te sirva de algo.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar