3

Preciso adicionar uma linha em uma posição específica de uma tabela, utilizando Javascript.

Exemplo:

<table>
  <tr><td>Teste</td></tr>
  <!-- Inserir linha aqui! -->
  <tr id="id_2">
   <td>Teste 2</td>
  </tr>
</table>
1
  • Como exatamente seria isto? Não seria muito mais facil adiciona-lo por html mesmo? 20/05/2015 às 20:21

2 Respostas 2

1

Utilizando jQuery, pode usar o insertBefore, assim:

$("<tr><td>Outro teste</td></tr>").insertBefore("#id_2");

Ou com Javascript puro, sem jQuery:

var tr = document.createElement("tr"); // cria o elemento tr
var td = document.createElement("td"); // cria o element td
var textnode = document.createTextNode("Outro teste"); 
td.appendChild(textnode); // adiciona o texto na td criada
tr.appendChild(td); // adiciona a td na tr

var tr_id2 = document.getElementById("id_2"); // pega a tr pelo id
// adiciona o elemento criado, a partir do nó pai (no caso <table>)
tr_id2.parentNode.insertBefore(tr, tr_id2); 
<table>
  <tr><td>Teste</td></tr>
  <!-- Inserir linha aqui! -->
  <tr id="id_2">
   <td>Teste 2</td>
  </tr>
</table>

0

O JavaScript tem métodos próprios para tabelas que facilitam isso. Podes juntar uma nova linha simplesmente com

var tr = table.insertRow(idIndex);

No teu caso podes fazer assim:

var idIndex = document.getElementById('id_2').rowIndex;
var table = document.querySelector('table');
var tr = table.insertRow(idIndex);
tr.innerHTML = '<td>Teste intermédio...</td>';

exemplo: http://jsfiddle.net/puxjewa6/

Leitura sobre isto (MDN em inglês):

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 .