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