Hide / Show coluna em uma tabela HTML

Question

Eu tenho uma tabela HTML com várias colunas e eu preciso implementar um seletor de coluna usando jquery. Quando um usuário clica em uma caixa de seleção Eu quero ocultar / mostrar a coluna correspondente na tabela. Eu gostaria de fazer isso sem anexar uma classe para cada td na tabela, há uma maneira para selecionar uma coluna inteira usando jquery? Abaixo está um exemplo do 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

Eu gostaria de fazer isso sem anexar uma classe para cada td

Pessoalmente, eu iria com o do cada-td class-on-/ th / col abordagem. Então você pode alternar colunas ligado e desligado usando uma única gravação para className no recipiente, assumindo regras de estilo como:

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

Este vai ser mais rápido do que qualquer abordagem circuito JS; para realmente longas mesas ele pode fazer uma diferença significativa para a capacidade de resposta.

Se você pode começar afastado com não apoiar IE6, você poderia usar seletores de adjacência para evitar ter de adicionar os atributos de classe para tds. Ou, em alternativa, se sua preocupação é fazer o limpador de marcação, você pode adicioná-los a partir de JavaScript automaticamente em um passo de inicialização.

Answer 2

Uma linha de código usando jQuery que esconde a segunda coluna:

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

Se a tabela tem cabeçalho (th), use o seguinte:

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

Fonte: Esconder uma coluna da tabela com uma única linha de código jQuery

jsFiddle para testar o código: http://jsfiddle.net/mgMem/1/

---

Se você quiser ver um caso de bom uso, dê uma olhada no meu blog:

Ocultar uma coluna da tabela e linhas colorize base em valor com jQuery .

Answer 3

você poderia usar colgroups:

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

seu script, em seguida, poderia mudar apenas a classe desejo <col>.

Answer 4

A seguir deve fazê-lo:

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

Este é o código não foi testado, mas o princípio é que você escolhe a célula da tabela em cada linha que corresponde ao índice escolhido extraído do nome caixa. Você poderia naturalmente limitar os seletores com uma classe ou um ID.

Answer 5

Aqui está uma resposta pouco mais completa, que fornece alguma interação do usuário com base em cada coluna. Se isso vai ser uma experiência dinâmica, é necessário que haja uma alternância clicável em cada coluna que indica a capacidade de ocultar a coluna, e em seguida, uma maneira de restaurar colunas anteriormente ocultas.

Isso seria algo parecido com isso em 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()

})

Para suportar isto, vamos adicionar alguma marcação para a mesa. Em cada cabeçalho de coluna, podemos acrescentar algo assim para dar uma indicação visual de algo clicável

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

Vamos permitir que o usuário para restaurar colunas através de um link no rodapé da tabela. Se não for persistente, por padrão, em seguida, alternando-lo em forma dinâmica no cabeçalho poderia se acotovelam em volta da mesa, mas você pode realmente colocá-lo em qualquer lugar que você gostaria:

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

Essa é a funcionalidade básica. Aqui está uma demonstração abaixo com mais algumas coisas desenvolvida. Você também pode adicionar uma dica de ferramenta para o botão para ajudar a esclarecer a sua finalidade, estilo o botão um pouco mais organicamente a um cabeçalho da tabela, e recolher a largura da coluna, a fim de adicionar alguns (um tanto vacilante) animações CSS para fazer a transição um pouco menos jumpy.

Demonstração de Trabalho em jsFiddle & pilha Snippets:

$(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, claro, o CSS única maneira para navegadores que suportam nth-child:

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

Isto é para IE9 e mais recente.

Para sua usecase, você precisa de várias classes para ocultar as colunas:

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

ect ...

Answer 7

A seguir está construindo no código de Eran, com um menor poucas mudanças. Testado e parece funcionar bem no 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

Sem classe? Você pode usar o Tag em seguida:

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

E para mostrar-lhes usar:

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