How to delete tbody from a table created via Javascript

Question

How to delete tbody from a table created via Javascript

Navigation

#1 by (3 votes)

0

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

I can do this using the command:

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

However, the table does not have id , how can I make this same deletion without id ?

follows 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

asked by anonymous 13.06.2018 / 18:42

1 answer

order by specific text [closed] Struct! You are giving error on line 47 at the time it compiles, Follow the program in c

score 3 · Accepted Answer

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 by taking the class .table :

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

In the example below, I created a function that receives the index of the button and excludes tbody from its 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><buttononclick="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>