Delete Generated Table and recreate again with other data

Asked

Viewed 725 times

0

I have this table that 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:

inserir a descrição da imagem aqui

When you click on a button to preview it looks like this:

inserir a descrição da imagem aqui

So far so good. This table is opened in a model. When I click the 'ok' button to close the model and I click again on the preview button:

inserir a descrição da imagem aqui

That is, I in the 'Ok' button wanted to clean the whole table and then generate it again by clicking on preview to not replicate the data. I tried to put $('#table').remove(); but when I press preview again it gives me the following error:

Uncaught TypeError: Cannot set property 'className' of null

How can I clean the table and generate it again?

javascript html html-table intellij-idea

  • it would not be simpler if the table already had all the data, and when clicking on the checkbox only perform a toggleClass in the respective column?

  • I’m quite Noob in HTML, I don’t know what toggleClass :

  • something like: http://jsfiddle.net/8pxsymjv/

  • I really liked your example, thanks in advance, it will certainly be useful. Just one question, the way it is, can the table appear after the checks selected? That is, I select Code and Designation, I click on a button and then the table appears , or toggleClasse only allows it to appear in real time ?

  • in this case the event must be associated with the Click of this Button and not with the Click of the checkbox. toggleClass only "on/off" the class.

1 answer

1


@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 so at the top of the page. But it is ideal to always have CSS in a separate file.

HTML - Header

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

JSFIDDLE

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

  • The css part is necessary to define it ?

  • You need to have a class with display: None; , this class will be enabled/disabled to display or not the column.

  • It’s just that I’m not messing with the css, I’ve never touched it, I can’t define that class anywhere else ?

  • you can add on own page, I will put a note in the reply.

  • Sorry but I’m still very green. In javascript I can set the class like this? Hide = Function(){ display: None; }

  • I already did, thank you very much was exactly this ;) I’m not getting is by the happening in the action of the button and not in the action of checkboxes. Clicking on the button opens a model, where the table will be

  • in this case the table would be inside the modal, the Button Click event would only open the Modal. no need to change the Checkbox Click event.

  • It’s already solved. Thank you @Tobymosque

Show 3 more comments

Browser other questions tagged javascript html html-table intellij-idea

You are not signed in. Login or sign up in order to post.