Delete generated table and re-create with other data

Question

Delete generated table and re-create with other data

Navigation

#1 by (1 votes)

0

I have this table which will be generated with values of checkboxes that I select.

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:

Clickingonabuttontopreviewitlookslikethis:

So far so good. This table opens in model . When I click on the 'ok' button to close the model and click again on the preview button it looks like this:

That is, I in the 'Ok' button wanted to clear the whole table and then re-generate it by clicking preview so I did not replicate the data. I tried to put $('#table').remove(); but when I reload in preview it gives me the following error:

Uncaught TypeError: Cannot set property 'className' of null

How can I clean the table and regenerate it?

javascript html intellij-idea html-table

asked by anonymous 05.02.2015 / 12:43

1 answer

center form vertically to center WordPress content page, how to edit

score 1 · Accepted Answer

@HugoMachado, a simpler approach would just change the visibility of the columns.

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

Alternatively you can put the CSS on the page itself. It is advisable to do it in the page header. But remember that the ideal is always to have CSS in a separate file.

HTML - Header

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

JSFIDDLE

link