0

Tenho esta tabela que será gerada com valores de checkboxes que eu seleciono.

HTML:

<table class="table table-hover" id="table">
    <thead>
      <tr></tr>
    </thead>
    <tbody>
      <tr id="Row2"></tr>
      <tr></tr>
      <tr></tr>
    </tbody>
</table>

JavaScript:

$('#preVisualizar').click(function () {       
        var checkbox = $('input:checkbox[name^=mcheckbox]:checked');

        if (checkbox.length > 0) {           
            var val = [];           
            checkbox.each(function () {
                val.push($(this).val());
            });

            var context = document.getElementById("table");
            context.className = "table";
            var header = context.createTHead();
            var row = header.insertRow();


            for (var i = 0; i < val.length; i++) {
                var th = document.createElement('th');
                th.innerHTML = val[i];
                row.appendChild(th);

                var row2 = document.getElementById("Row2");
                var y = row2.insertCell(i);
                y.innerHTML = "Ex. " + val[i];
            };

        } else {}
}
});

WEB:

inserir a descrição da imagem aqui

Ao clicar num botão para pré-visualizar fica assim:

inserir a descrição da imagem aqui

Até aqui tudo bem. Essa tabela é aberta num model. Quando clico no botão 'ok' para fechar o model e volto a clicar no botão pré-visualizar fica assim:

inserir a descrição da imagem aqui

Isto é, eu no botão 'Ok' queria limpar a tabela toda e depois voltar a gerá-la ao clicar em pre-visualizar para não me replicar os dados. Tentei colocar $('#table').remove(); mas quando volto a carregar em pré-visualizar dá-me o seguinte erro:

Uncaught TypeError: Cannot set property 'className' of null

Como poderei fazer um 'clean' à table e voltar a gerá-la?

5
  • não seria mais simples se a tabela já possuise todos os dados, e ao cliclar no checkBox apenas realizar um toggleClass na respectida coluna? Commented 5/02/2015 às 12:00
  • Sou bastante noob em HTML, não sei o que é o toggleClass :s Commented 5/02/2015 às 12:10
  • algo do genero: jsfiddle.net/8pxsymjv Commented 5/02/2015 às 12:39
  • Gostei bastante do seu exemplo, desde já obrigado, certamente será útil. Só uma questão, da forma que está, dá para por a aparecer a tabela depois das checks selecionadas? Isto é, seleciono Codigo e Designação, clico num botão e aí sim, aparecer a tabela , ou o toggleClasse só permite assim digamos que a aparecer em tempo real ? Commented 5/02/2015 às 13:01
  • neste caso o evento deve esta associado ao Click deste Button e nao ao Click do checkBox. O toggleClass apenas "liga/desliga" a classe. Commented 5/02/2015 às 13:12

1 Resposta 1

1

@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;
}

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

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

8
  • A parte do css é necessário defini-la ? Commented 5/02/2015 às 13:51
  • É preciso ter uma classe com display: none; é esta classe que será ativada/desativada para exibir ou não a coluna. Commented 5/02/2015 às 13:53
  • É que eu não estou a mexer no css, nunca mexi, não posso definir essa classe noutro lado ? Commented 5/02/2015 às 13:54
  • você pode adicionar na propria pagina, vou colocar uma nota na resposta. Commented 5/02/2015 às 13:56
  • Desculpe mas tou muito verde nisto ainda. No javascript posso definir a class assim? hide = function(){ display: none; } Commented 5/02/2015 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .