Skip to main content
adicionou 344 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

Alternativamente você pode colocar o CSS na propria pagina. É aconselhavel faze-lo no cabeçario da pagina. Mas lembresse que o ideal é sempre ter o CSS em um arquivo separado.

HTML - Header

<head>
    ...
    <style type="text/css">
        .hide { display: none; }
    </style>
    ...
</head>

JSFIDDLE

JSFIDDLE

Alternativamente você pode colocar o CSS na propria pagina. É aconselhavel faze-lo no cabeçario da pagina. Mas lembresse que o ideal é sempre ter o CSS em um arquivo separado.

HTML - Header

<head>
    ...
    <style type="text/css">
        .hide { display: none; }
    </style>
    ...
</head>

JSFIDDLE

Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

@HugoMachado, uma abordagem mais simples seria apenas alterar a visibilidade das colunas.

HTML

<div>
    <input id="ckCodigo" name="ckCodigo" type="checkbox" data-type="ckColuna" data-column="codigo" />
    <label for="ckCodigo">Código</label>
</div>
<div>
    <input id="ckDesignacao" name="ckDesignacao" type="checkbox" data-type="ckColuna" data-column="designacao" />
    <label for="ckDesignacao">Designação</label>
</div>
<div>
    <input id="ckQuantidade" name="ckQuantidade" type="checkbox" data-type="ckColuna" data-column="quantidade" />
    <label for="ckQuantidade">Quantidade</label>
</div>

<table id="table" class="hide">
    <thead>
      <tr>
          <th class="hide" data-column="codigo">Código</th>
          <th class="hide" data-column="designacao">Designação</th>
          <th class="hide" data-column="quantidade">Quantidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
    </tbody>
</table>

JS

var checkBoxes = $("[data-type='ckColuna']");
var tabela = $("#table");

checkBoxes.click(function () {
    if (checkBoxes.filter(":checked").length > 0) {
        tabela.removeClass("hide");
    } else {
        tabela.addClass("hide");
    }        
    
    var checkBox = $(this);
    var celulas = $("table [data-column='" + checkBox.attr("data-column") + "']");
    celulas.toggleClass("hide");
});

CSS

.hide {
    display: none;
}

JSFIDDLE

http://jsfiddle.net/8pxsymjv/1/