How to delete tbody from a table created via Javascript

Asked

Viewed 342 times

0

I create a table dynamically from the result of a bank query. But I would like to have a control to eliminate the <tbody> of the same.

I can do it using the command :

  var body = $("#tbSemana").find('tbody').remove();
  $("#tbSemana").append(document.createElement('tbody'));

But the table has not id, how can I make that same exclusion without the id?

following table created:

   for (var i = 0; i < ciclos.length; i++) {
                        var atual = ciclos[i];
                        var html = "<table class=\"table\"><thead>" +
                            "<tr>" +
                            "<th>Pts Sem. 1</th>" +
                            "<th>Qualificação Sem. 1</th>" +
                            "<th>Pts Sem. 2</th>" +
                            "<th>Qualificação Sem. 2</th>" +
                            "<th>Pts Sem. 3</th>" +
                            "<th>Qualificação Sem. 3</th>" +
                            "<th>Pts Sem. 4</th>" +
                            "<th>Qualificação Sem. 4</th>" +
                            "</tr>" +
                            "</thead<tbody><tr>";


                        if (semana[0] != null) {
                            if (true) {
                               //html += "<td>" + atual.id + " - " + atual.nome + "</td>";
                                html += "<td style=\"text-align: center; \">" + atual.totPst1 + "</td>";
                                html += "<td style=\"text-align: center; \">" + atual.grad1 + "</td>";
                                a += ciclos[i].totPst1;
                            }
                            else {
                                //html += "<td>" + atual.id + " - " + atual.nome + "</td>";
                                html += "<td style=\"text-align: center; \">0</td>";
                                html += "<td style=\"text-align: center; \">-</td>";
                            }
                        }
                        else {
                            html += "<td style=\"text-align: center; \">0</td>";
                            html += "<td style=\"text-align: center; \">-</td>";
                        }

                        if (semana[1] != null) {
                            if (true) {
                                html += "<td style=\"text-align: center; \">" + atual.totPst2 + "</td>";
                                html += "<td style=\"text-align: center; \">" + atual.grad2 + "</td>";
                                b += ciclos[i].totPst2;
                            }
                            else {
                                html += "<td style=\"text-align: center; \">0</td>";
                                html += "<td style=\"text-align: center; \">-</td>";
                            }
                        }
                        else {
                            html += "<td style=\"text-align: center; \">0</td>";
                            html += "<td style=\"text-align: center; \">-</td>";
                        }

                        if (semana[2] != null) {
                            if (true) {
                                html += "<td style=\"text-align: center; \">" + atual.totPst3 + "</td>";
                                html += "<td style=\"text-align: center; \">" + atual.grad3 + "</td>";
                                c += ciclos[i].totPst3;
                            }
                            else {
                                html += "<td style=\"text-align: center; \">0</td>";
                                html += "<td style=\"text-align: center; \">-</td>";
                            }
                        }
                        else {
                            html += "<td style=\"text-align: center; \">0</td>";
                            html += "<td style=\"text-align: center; \">-</td>";
                        }

                        if (semana[3] != null) {
                            if (true) {
                                html += "<td style=\"text-align: center; \">" + atual.totPst4 + "</td>";
                                html += "<td style=\"text-align: center; \">" + atual.grad4 + "</td>";
                                d += ciclos[i].totPst4;
                            }
                            else {
                                html += "<td style=\"text-align: center; \">0</td>";
                                html += "<td style=\"text-align: center; \">-</td>";
                            }
                        }
                        else {
                            html += "<td style=\"text-align: center; \">0</td>";
                            html += "<td style=\"text-align: center; \">-</td>";
                        }
                        html += "</tr>";
                        //$("#tbgrad").find('tbody').append(html);
                        html += "</tbody></table>";
                    }
javascript
  • 2

    Instead of $("#tbSemana") use $("table.table")

  • @Sorack it deletes another table I have on the page. I just put as example the code, pq use in it. Now to delete a table made via Javascript do not know.

1 answer

3


You can select the table by index using :eq(índice), where index = 0 refers to the first table, index = 1 refers to the second and so on.

For this, you use the selector picking by the class .table:

$(".table:eq(índice) tbody").remove();

In the example below I created a function that receives the index of the button and deletes the tbody of the respective table:

function remove(n){
   $(".table:eq("+n+") tbody").remove();
}

ciclos = semana = [1,2,3,4];
for (var i = 0; i < ciclos.length; i++) {
   var atual = ciclos[i];
   var html = "<table class=\"table\"><thead>" +
       "<tr>" +
       "<th>Pts Sem. 1</th>" +
       "<th>Qualificação Sem. 1</th>" +
       "<th>Pts Sem. 2</th>" +
       "<th>Qualificação Sem. 2</th>" +
       "<th>Pts Sem. 3</th>" +
       "<th>Qualificação Sem. 3</th>" +
       "<th>Pts Sem. 4</th>" +
       "<th>Qualificação Sem. 4</th>" +
       "</tr>" +
       "</thead><tbody><tr>";


   if (semana[0] != null) {
       if (true) {
          //html += "<td>" + atual.id + " - " + atual.nome + "</td>";
           html += "<td style=\"text-align: center; \">1</td>";
           html += "<td style=\"text-align: center; \">1</td>";
       }
       else {
           //html += "<td>" + atual.id + " - " + atual.nome + "</td>";
           html += "<td style=\"text-align: center; \">0</td>";
           html += "<td style=\"text-align: center; \">-</td>";
       }
   }
   else {
       html += "<td style=\"text-align: center; \">0</td>";
       html += "<td style=\"text-align: center; \">-</td>";
   }

   if (semana[1] != null) {
       if (true) {
           html += "<td style=\"text-align: center; \">1</td>";
           html += "<td style=\"text-align: center; \">1</td>";
       }
       else {
           html += "<td style=\"text-align: center; \">0</td>";
           html += "<td style=\"text-align: center; \">-</td>";
       }
   }
   else {
       html += "<td style=\"text-align: center; \">0</td>";
       html += "<td style=\"text-align: center; \">-</td>";
   }

   if (semana[2] != null) {
       if (true) {
           html += "<td style=\"text-align: center; \">1</td>";
           html += "<td style=\"text-align: center; \">1</td>";
       }
       else {
           html += "<td style=\"text-align: center; \">0</td>";
           html += "<td style=\"text-align: center; \">-</td>";
       }
   }
   else {
       html += "<td style=\"text-align: center; \">0</td>";
       html += "<td style=\"text-align: center; \">-</td>";
   }

   if (semana[3] != null) {
       if (true) {
           html += "<td style=\"text-align: center; \">1</td>";
           html += "<td style=\"text-align: center; \">1</td>";
       }
       else {
           html += "<td style=\"text-align: center; \">0</td>";
           html += "<td style=\"text-align: center; \">-</td>";
       }
   }
   else {
       html += "<td style=\"text-align: center; \">0</td>";
       html += "<td style=\"text-align: center; \">-</td>";
   }
   html += "</tr>";
   //$("#tbgrad").find('tbody').append(html);
   html += "</tbody></table>";
   
   $("body").append(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="remove(0)">Remover tbody 1</button>
<button onclick="remove(1)">Remover tbody 2</button>
<button onclick="remove(2)">Remover tbody 3</button>
<button onclick="remove(3)">Remover tbody 4</button>

Browser other questions tagged javascript

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