2

Uso o código abaixo pra inserir uma linha em uma tabela:

var linha = "<tr>";
linha += '<td class="cnes">' + cnes + '</td>';
linha += '<td class="cbo">' + cbo + '</td>';
linha += '<td class="profissional">' + profissional + '</td>';
linha += '<td class="procedimento">' + procedimento + '</td>';
linha += '<td class="idade">' + idade + '</td>';
linha += '<td class="quant">' + quant + '</td>';
linha += '<td><button class="btn btn-danger" style="text-align:center;" onclick="remove(this)">Excluir</button></td>'
linha += '</tr>';

$("#tabelaProducao").append(linha);

Sendo que ele insere no final da mesma e eu preciso que seja inserida na segunda linha (a primeira é o cabeçalho das colunas). Como faço?

3 Respostas 3

4

Ao invés do append use o prepend e coloque um tbody para separar cabeçalho do corpo:

...
$("#tabelaProducao tbody").prepend(linha);

Exemplo

var linha = "<tr>";
linha += '<td class="cnes"> Item' + 3 + '</td>';
linha += '<td class="cbo"> Item' + 4 + '</td>';
linha += '</tr>';

$("#tabelaProducao tbody").prepend(linha);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabelaProducao">
  <thead>
    <tr>
      <th>Titulo 1</th>
      <th>Titulo 2</th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
    </tr>  
  </tbody>
</table>

2
  • Você pode dar um exemplo de onde eu devo incluir o tbody geralmente crio as tabelas sem ele? 17/07/2017 às 18:15
  • Sim @ItaloRodrigo, atualizei a resposta.
    – BrTkCa
    17/07/2017 às 18:19
3

Lembro que já usei a insertBefore.

var linha = "<tr>";
linha += '<td class="cnes">' + cnes + '</td>';
linha += '<td class="cbo">' + cbo + '</td>';
linha += '<td class="profissional">' + profissional + '</td>';
linha += '<td class="procedimento">' + procedimento + '</td>';
linha += '<td class="idade">' + idade + '</td>';
linha += '<td class="quant">' + quant + '</td>';
linha += '<td><button class="btn btn-danger" style="text-align:center;" onclick="remove(this)">Excluir</button></td>'
linha += '</tr>';

$("#tabelaProducao").insertBefore(linha);

Dei uma pesquisada e achei essa resposta que tem mais duas opções.

3

$("table > tbody").prepend("<tr><td>Linha Nova 1</td><td>Linha Nova 2</td><td>Linha Nova 3</td>   </tr>")
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<table>
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Linha 1</td>
      <td>Linha 2</td>
      <td>Linha 3</td>
    </tr>
  </tbody>

1
  • Exatamente, rs, é que copiei o código do thead! uhauhauahuahu, Malsssss
    – mcamara
    17/07/2017 às 18:23

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 .