Tengo varios campos en un formulario y si un usuario hace clic en un campo quiero mostrar una tabla de lo contrario, si hacen clic en otro campo de la tabla debe ser ocultado.

He probado este javascript, pero cuando otros campos se hace clic en no ocultar la tabla:

<script>
function myFunction() {
    if (document.getElementById("userform")) {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

</script>   

En cada campo, he incluido un onclick="myFunction()" dentro de cada tipo de entrada. La mesa está puesta para style="display:none"

Este es el HTML:

    <form class="form-horizontal" role="form">
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction()">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="()">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sample btn-lg">
<b>Submit</b>
</button>
</div>
</div>
</form>
<div id="userinfo" class="collapse in" style="display:none">
<table class="table table-bordered" id="phone-table">
<tbody>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
&nbsp;<br> <b>1</b>
</button>
</td>
<td class="col-md-1">
<button type="button"
class="btn btn-primary btn-xs1">
<b>ABC<br>2
</b>
</button>
</td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>DEF<br>3
</b>
</button>
</td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>GHI<br>4
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>JKL<br>5
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>MNO<br>6
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>PQRS<br>7
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>TUV<br>8
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>WXYZ<br>9
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>&nbsp;<br>0
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-eraser"></i><br>Clr</b>
</button></td>
</tr>
</tbody>
</table>
</div>
  • mostrar código html también
  • Por favor enviar un jsfiddle para facilitar y proporcionar una solución sobre la marcha
  • Son sus elementos de la realidad con id="input" y id="table"?
  • He cambiado los nombres de id para ambos campos no son los que estoy usando.
  • agregue el código fuente html así
  • bonita y limpia el código es como una tela de un programador está usando, por lo que «tratar de llevar la limpieza ropa hermosa»

InformationsquelleAutor user94628 | 2014-08-02

3 Comentarios

  1. 2

    desde Jquery fue uno de etiquetas, voy a tirar mi centavos en jquery

    .hide(); /.show(); se establece implícitamente dislay a block o none en css.

    $(function(){
    $('#close').on('click',function(){
    $('#danceforme').hide();
    });
    $('#open').on('click',function(){
    $('#danceforme').show();
    });
    });

    html

    <button id="close">Stop Dancing</button>
    <button id="open">Dance for me</button>
    <div id="danceforme">
    I am dancing
    </div>

    demo: http://jsfiddle.net/doniyor/5FT9x/

    • Gracias…..Creo que el problema era que yo había incluido a mi JS de bootstrap y JQuery enlaces en la parte inferior del archivo HTML que cuando me mudé de estos a la parte superior en el <head> etiqueta funcionó.
    • sí, lo has hecho bien. 😉
  2. 2

    Que se han etiquetado jQuery también así que en ese caso será

    $("#id").show();
    $("#id").hide();
  3. 2

    Doniyor la Respuesta es ideal para jQuery. Quiero ayudar a explicar cómo hacer que su actual código de trabajo, ya que le ayudará a entender por qué no estaba trabajando, en lugar de sólo entrega una solución.

    Solución Simple

    El problema con myFunction() es la instrucción if –

    if (document.getElementById("userform"))

    Que comprueba si un elemento con ID «formulario de usuario» que existe en el DOM. Si lo hace, la instrucción devuelve true. Ya hay una entrada con ID «formulario de usuario» en el HTML que proporcionan, esto siempre será verdad.

    Lugar, desea comprobar si el elemento que desencadenó su función tenía el ID «formulario de usuario»,

    tan relevantes HTML tendría este aspecto:

    <div class="form-group">
    <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
    <div class="col-sm-10">
    <input type="tel" class="form-control" id="userform"
    placeholder="Enter your unique Pi identity"  onclick="myFunction(this)" />
    </div>
    </div>
    <div class="form-group">
    <label for="inputPassword1" class="col-sm-1 control-label">
    <b>Password</b>
    </label>
    <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword1"
    placeholder="Password" onclick="myFunction(this)"/>
    </div>
    </div>

    Y myFunction() tendría este aspecto:

    function myFunction(obj) {
    if (obj.id == "userform") {
    document.getElementById("userinfo").style.display="block";
    } else {
    document.getElementById("userinfo").style.display="none";
    }
    }

    jsFiddle

    Una explicación de registro de eventos onclick. Debido a que usted está registrando el onclick a través de html, y no en una secuencia de comandos, el elemento propulsor no se convierta en el propietario de la función, que es lo que this haría referencia. Así que tenemos que pasar el objeto a través de un parámetro, y comprobar que el ID del objeto.

    Por supuesto, todo esto es muy rotonda, y ya que estamos usando jQuery y bootstrap, usted probablemente no quiere manualmente mostrar y ocultar las cosas.

    Bootstrap + jQuery fantasía solución

    El div que usted está tratando de mostrar/ocultar es un colapso, que bootstrap tiene la funcionalidad para ya.

    Bootstrap solución jsFiddle

    Explicación: en Primer lugar, he quitado el style="display:none" y clase in sobre el colapso del elemento. Clase in en un colapso dice bootstrap de forma predeterminada, el elemento de la muestra, mientras que display:none anula bootstrap del estilo. Es suficiente para el uso class="collapse", el cual por defecto se derrumbó, o se oculta.

    Siguiente, he quitado el onclick asignaciones, ya que vamos a dejar de bootstrap manejar eso.

    Finalmente, que sustituyó a la secuencia de comandos existente comportamiento con una secuencia de comandos diciendo bootstrap el comportamiento que desea:

    $("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
    $("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});

    Dejé las alertas para la depuración, siempre útil cuando usted no está seguro de lo que está pasando!

    Entonces, ¿qué se esta haciendo? Siguiente Bootstrap es un ejemplo de uso, queremos que el colapso a mostrar cuando hacemos clic en el «formulario de usuario» elemento.

    Primero, decimos jquery queremos hacer algo cuando el elemento con id userform obtiene el foco. Que $("#userform").focusin() a través de jQuery API docs.

    Luego le decimos a jquery lo que queremos hacer cuando eso sucede – se podría especificar un nombre de función, como myFunction(), pero en este caso, es sólo una línea, así que vamos a crear una función en línea. Que function(){}.

    Dentro de esa función, podemos especificar el Bootstrap comportamiento que necesitamos. Desde el Bootstrap docs, sabemos que podemos utilizar la función collapse("show") para expandir manualmente el colapso del elemento. A decir de Bootstrap que uno sólo damos jQuery el identificador del elemento! Juntos, eso es $("#userinfo").collapse("show");

    Poner que dentro de la función que se activará, que se especifica en nuestra focusin() función, obtenemos el resultado final: `$(«#formulario de usuario»).focusin(function(){ $(«#userinfo»).colapso(«show»);});

    Siguiente, hacemos lo mismo para los elementos que desea desencadenar ocultar el colapso del elemento. Así que acaba de modificar esa línea #inputPassword1, y decirle que ocultar el colapso utilizando collapse("hide") en lugar de "show". Lógico, ¿verdad?

    Me parece muy útil cuando estoy programación de comportamientos como este para consultar la documentación. Generalmente hay ejemplos de exactamente lo que quiero hacer, que sólo requieren menor ajustes para ponerse a trabajar en mis sitios.

    jQuery es la documentación aquí.

    Bootstrap de la documentación está aquí.

    Y a la hora de pedir ayuda sobre MANERA, que es grande si usted puede crear un jsFiddle para aislar el problema de la complejidad de la página web que se está produciendo. A continuación, otros usuarios que quieran ayudar pueden crear copias modificadas de su código para mostrar. Es super útil!

    Saludos.

    • Gran respuesta y gracias por la explicación y jsfiddle del. Esto será útil ir hacia adelante.

Dejar respuesta

Please enter your comment!
Please enter your name here