Nascondi / Mostra colonna in una tabella HTML

Ho una tabella HTML con diverse colonne e ho bisogno di implementare un selettore di colonne usando jquery. Quando un utente fa clic su una casella di controllo, voglio nascondere / mostrare la colonna corrispondente nella tabella. Vorrei farlo senza associare una classe a ogni td nella tabella, c'è un modo per selezionare un'intera colonna usando jquery? Di seguito è riportato un esempio dell'HTML.

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

Vorrei farlo senza associare una classe a ogni td

Personalmente, seguirei l'approccio class-on-each-td / th / col. Quindi puoi attivare e disattivare le colonne utilizzando una singola scrittura su className sul contenitore, assumendo regole di stile come:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

Questo sarà più veloce di qualsiasi approccio loop JS; per tavoli molto lunghi può fare una differenza significativa in termini di reattività.

Se riesci a cavartela senza supportare IE6, puoi usare i selettori di adiacenza per evitare di dover aggiungere gli attributi di classe a tds. In alternativa, se la tua preoccupazione è rendere il markup più pulito, potresti aggiungerli automaticamente da JavaScript in una fase di inizializzazione.

Una riga di codice usando jQuery che nasconde la seconda colonna:

$('td:nth-child(2)').hide();

Se la tua tabella ha un'intestazione (th), usa questo:

$('td:nth-child(2),th:nth-child(2)').hide();

Origine: nasconde una colonna della tabella con una singola riga di codice jQuery

jsFiddle per testare il codice: http://jsfiddle.net/mgMem/1/

Se vuoi vedere un buon caso d'uso, dai un'occhiata al mio post sul blog:

Nascondi una colonna della tabella e colora le righe in base al valore con jQuery .

potresti usare i colgroup:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

la tua sceneggiatura potrebbe cambiare solo la <col>classe del desiderio .

Quanto segue dovrebbe farlo:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

Questo è un codice non testato, ma il principio è che si sceglie la cella della tabella in ogni riga che corrisponde all'indice scelto estratto dal nome della casella di controllo. Ovviamente potresti limitare i selettori con una classe o un ID.

Ecco una risposta un po 'più completa che fornisce alcune interazioni dell'utente su base per colonna. Se si tratterà di un'esperienza dinamica, è necessario attivare / disattivare un clic su ogni colonna per indicare la possibilità di nascondere la colonna e quindi un modo per ripristinare colonne precedentemente nascoste.

Sarebbe simile a questo in JavaScript:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

A supporto di ciò, aggiungeremo un po 'di markup alla tabella. In ogni intestazione di colonna, possiamo aggiungere qualcosa del genere per fornire un indicatore visivo di qualcosa su cui è possibile fare clic

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

Consentiremo all'utente di ripristinare le colonne tramite un collegamento nel piè di pagina della tabella. Se non è persistente per impostazione predefinita, attivarlo dinamicamente nell'intestazione potrebbe spostarsi attorno al tavolo, ma puoi davvero inserirlo ovunque tu voglia:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

Questa è la funzionalità di base. Ecco una demo di seguito con un paio di cose in più. Puoi anche aggiungere una descrizione comando al pulsante per chiarire il suo scopo, dare uno stile un po 'più organico all'intestazione di una tabella e comprimere la larghezza della colonna per aggiungere alcune animazioni css (un po' traballanti) per rendere la transizione un po 'meno jumpy.

Demo di lavoro in jsFlack & Stack Snippet:

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex + 1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th class="hide-col">
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Type
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Attributes
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

  </tbody>
  <tfoot class="footer-restore-columns">
    <tr>
      <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>

E, naturalmente, il CSS è l'unico modo per i browser che supportano nth-child :

table td:nth-child(2) { display: none; }

Questo è per IE9 e successivi.

Per il tuo caso d'uso, avresti bisogno di diverse classi per nascondere le colonne:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...

Quanto segue si basa sul codice di Eran, con alcune piccole modifiche. Provato e sembra funzionare bene su Firefox 3, IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

Senza lezione? È possibile utilizzare il tag quindi:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

E per mostrarli usa:

...style.display = 'table-cell';