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!


