Necesito una tabla que sólo puede mostrar ciertas columnas dependiendo de si la casilla de verificación está seleccionada o no. Si se selecciona, quiero que todas las columnas a mostrar. Si no está seleccionada, la necesito para mostrar sólo el «semanario» de la clase columnas. Quiero usar como poco de JavaScript (si cualquier) como sea posible y debe ser cross-browser compatible.

 <table>
   <tr class="weekly">
     <td></td>
   </tr>
   <tr class="overall">
     <td></td>
   </tr>
 </table>
 <input type="checkbox" name="data" value="Show Overall Data"  />

Simplemente, necesito una tabla para que ocultar y mostrar ciertas columnas dependiendo de lo que la casilla de verificación estado.

También, no soy bueno con la codificación por lo que tendría a alguien a pegar todo el código, incluyendo las etiquetas HTML y lo que no.

algo como esto
¿qué has intentado?
He mirado y parece que lo estoy buscando, pero necesito el código en lenguaje HTML, así que puedo copiar y pegar, soy un principiante con JS.

OriginalEl autor Shane Hicks | 2012-05-05

4 Comentarios

  1. 2

    Javascript

    function check()
    {
    
      if(document.getElementById("weekly").style.display == "none")
        document.getElementById("weekly").style.display = "block";
      else
        document.getElementById("weekly").style.display = "none";
      if(document.getElementById("overall").style.display == "block")
       document.getElementById("overall").style.display = "none";
      else
       document.getElementById("overall").style.display = "block";
    
    }

    Y HTML

    <table>
       <tr class="weekly" id="weekly" style="display:none">
         <td>ABBB</td>
       </tr>
       <tr class="overall" id="overall" style="display:none">
         <td>BCC</td>
       </tr>
     </table>
    <input type="checkbox" name="data" value="Show Overall Data" onclick="check()"/>
    Esto oculta la fila y la pregunta era cómo ocultar la columna.

    OriginalEl autor Jhilom

  2. 1

    EDITADO: html Completo aquí. usando jquery

    <html>
    <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    
    $(document).ready(function(){
    
    
    if ($("input:checkbox").is(":not(:checked)")){
        $('tr').hide();
       $('tr.weekly').show();
    }
    
    });
    </script>
    </head>
    <body>
    <input type="checkbox" name="data"/>
    
    <table>
       <tr class="weekly">
         <td>WEEEKLY</td>
       </tr>
       <tr class="overall">
         <td>OVERLLL</td>
       </tr>
     </table>
    
    </body>
    </html>
    Hey amigo la pregunta es para ocultar la columna y que le ha dado la solución para ocultar la fila.. Totalmente respuesta incorrecta con respecto a la pregunta.
    Puedes escribir esto en el formulario HTML para mí? Yo no soy buena en JavaScript.
    Dijo columna, que es correcto, pero si usted puede ver su código, cualquiera podría entender que él quiere ocultar todas las columnas en la fila. Por qué no lo entiendes?
    Es que lo que quería? 🙂
    Sí @sha404 está a la derecha? Él no ha explicado la Pregunta correctamente.

    OriginalEl autor sha256

  3. 0

    Basándose en el ejemplo de @anu señaló en una anterior respuesta de stackoverflow,
    he aquí un ejemplo en vivo en jsbin.

    http://jsbin.com/ehodul/4/edit#javascript,html,vivir

    A continuación es (más) del código, pero de nuevo,
    Me animo a jugar con el ejemplo en jsbin.

    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="jquery.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style>
      article, aside, figure, footer, header, hgroup, 
      menu, nav, section { display: block; }
      table { padding: 0; border-collapse: collapse; }
      table th { background-color: #eee; }
      table td, th { border: 1px solid #d7d7d7; padding: 7px; }
    </style>
    </head>
    <body>
    
    
    <select id="myOptions">
      <option value="1">hide col 1</option>
      <option value="2">hide col 2</option>
      <option value="3">hide col 3</option>
      <option value="4">hide col 4</option>
    </select>  
    
      <p>&nbsp;</p>
    
    <table id="myTable" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>col 1</th>
          <th>col 2</th>
          <th>col 3</th>
          <th>col 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1abcdefg</td>
          <td>2abcdefg</td>
          <td>3abcdefg</td>
          <td>4abcdefg</td>
        </tr>
        <tr>
          <td>1abcdefg</td>
          <td>2abcdefg</td>
          <td>3abcdefg</td>
          <td>4abcdefg</td>
        </tr>
        <tr>
          <td>1abcdefg</td>
          <td>2abcdefg</td>
          <td>3abcdefg</td>
          <td>4abcdefg</td>
        </tr>
        <tr>
          <td>1abcdefg</td>
          <td>2abcdefg</td>
          <td>3abcdefg</td>
          <td>4abcdefg</td>
        </tr>
      </tbody>
      </table>  
    
      <script type="text/javascript">
    function hideColumn(columnIndex) {
       $('#myTable thead th, #mytable tbody td').show();
       $('#mytable thead th:nth-child('+(columnIndex)+'), #mytable tbody td:nth-child('+(columnIndex)+')').hide();
    
    }
    
        $("#myOptions").change(function() {
          selectedVal = $(this).val();
          console.log(selectedVal);
          hideColumn( selectedVal );
        });
    
      </script>
    </body>
    </html>

    OriginalEl autor mg1075

  4. 0

    el uso de jquery

    $(document).ready(function () {
        $('.overall').hide();
    }); 
    
    $("#data").is(':checked')
        ? $(".overall").show() 
        : $(".overall").hide();

    cambio de nombre = «datos» Id = «datos»

    OriginalEl autor user1376261

Dejar respuesta

Please enter your comment!
Please enter your name here