Espero me puedan ayudar con un problema que tengo sobre un formulario; les explico:
Tengo un formulario sobre una tabla, dentro de el formulario manejo algunos select dinamicos, dependiendo la opcion que se seleccione me aparece un campo mas; el codigo de javascript que utilizo es el siguiente:
Código:
Y para mi formulario el html es el siguiente:function toggle_embalaje(elemento) { if(elemento.value==1) { document.getElementById("span_embalaje").style.display = "block"; } else { document.getElementById("span_embalaje").style.display = "none"; } }
Código:
El codigo en si funciona a la perfeccion, pero esteticamente es donde falla, les explico: Si se visualiza en IE, el tag <tr> que se agrega con el select se alinea perfectamente con la tabla, pero si lo veo con cualquier otro navegador, el tag agregado se descuadra de la tabla y mueve toda la estructura que se tiene.<table align="center" id="vis_table"> <tr> <th>Embalaje:</th> <td><select name="emblaje" id="embalaje" onchange="toggle_embalaje(this);"> <option value="">- - - -SELECCIONE- - - -</option> <option value="1">SI</option> <option value="2">NO</option> </select></td> </tr> <tr id="span_embalaje" style="display:none;"> <th>Caracteristicas:</th> <td><textarea name="caracteristicas"></textarea></td> </tr> </table>
Existe algun codigo que se pueda agregar para evitar esto?
Estuve viendo la posibilidad de utilizar jquery, pero como no entiendo mucho, lo logro hecharlo andar y ya no se que hacer; ya vi como obtener el valor de mi select y como hacer el toggle para que aparezca el <tr> pero no me funciona, el codigo que probe es el siguiente:
Código:
Espero me puedan ayudar.<script type="text/javascript"> $(document).ready(function(){ $("#embalaje").change(function(){ var seleccionEmbalaje = $("#embalaje option:selected").val(); if (seleccionEmbalaje==1){ $("#span_embalaje").slideToggle(); }else{ $("#span_embalaje").hide(); } }); }); </script>
Gracias!