Nascondi / Mostra colonna in una tabella HTML

Question

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>

Answer 1

  

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 sola 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 ad anello JS; per tabelle molto lunghe 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, puoi aggiungerli automaticamente da JavaScript in una fase di inizializzazione.

Answer 2

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 questa:

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

Fonte: Nascondi una colonna della tabella con una riga singola 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 sul valore con jQuery .

Answer 3

puoi 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>

il tuo script quindi potrebbe cambiare solo il desiderio <col> classe.

Answer 4

Dovresti farlo come segue:

$("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.

Answer 5

Ecco una risposta un po 'più completa che fornisce alcune interazioni dell'utente su base per colonna. Se questa sarà un'esperienza dinamica, ci deve essere un interruttore selezionabile su ogni colonna che indica 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()

})

Per supportare questo, aggiungeremo un po 'di markup alla tabella. In ogni intestazione di colonna, possiamo aggiungere qualcosa del genere per fornire un indicatore visivo di qualcosa cliccabile

<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, modellare un po 'più organicamente il pulsante in un'intestazione della tabella e comprimere la larghezza della colonna per aggiungere alcune animazioni CSS (un po' complicate) per rendere la transizione un po 'meno jumpy.

Demo di lavoro in jsFiddle & amp; 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>

Answer 6

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

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

Questo è per IE9 e successivi.

Per il tuo caso d'uso, occorrerebbero diverse classi per nascondere le colonne:

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

ect ...

Answer 7

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>

Answer 8

<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>

Answer 9

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';