0

Tenho um AJAX que no success traz um response:

$(response).each(function(i) {
  alert(response[i]);
  $('#tbody').html(
    "<tr>" +
    "<td>" + response[i].id + "</td>" +
    "<td>" + response[i].nome + "</td>" +
    "</tr>")
});

Meu HTML:

<tbody id="tbody"></tbody>

Porém ele está sobrescrevendo os dados, ou seja, quando i=0 fica assim:

<tbody id="tbody">
  <tr>
    <td> 1 </td>
    <td> Maria </td>
  </tr>
</tbody>

quando i=1:

<tbody id="tbody">
  <tr>
    <td> 2 </td>
    <td> João </td>
  </tr>
</tbody>

Resultado esperado:

<tbody id="tbody">
  <tr>
    <td> 1 </td>
    <td> Maria </td>
  </tr>
  <tr>
    <td> 2 </td>
    <td> João </td>
  </tr>
</tbody>

1 Resposta 1

4

O problema é que você está utilizando .html() e ele vai substituir a cada iteração. O correto é utilizar o append().

$(response).each(function(i) {
  alert(response[i]);
  $('#tbody').append(
    "<tr>" +
    "<td>" + response[i].id + "</td>" +
    "<td>" + response[i].nome + "</td>" +
    "</tr>")
});     

O append() pega o que já tem e adiciona um novo.

3
  • 1
    Gilmar, você poderia adicionar links para a documentação oficial para sua resposta ficar ainda melhor 31/10/2018 às 14:04
  • Link da documentação append jquery. api.jquery.com/append 31/10/2018 às 14:41
  • Eu me referia a editar sua resposta, mas tudo bem. Eu adiciono. 31/10/2018 às 14:52

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 .