Hola Buenas Tardes!
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:
function toggle_embalaje(elemento) {
if(elemento.value==1) {
document.getElementById("span_embalaje").style.display = "block";
} else {
document.getElementById("span_embalaje").style.display = "none";
}
}
Y para mi formulario el html es el siguiente:
Código:
<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>
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.
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:
<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>
Espero me puedan ayudar.
Gracias!