0

Estou tendo problemas para inserir HTML usando ajax

HTML:

<table class="table table-hover">
    <thead id="thead">
        <tr id="tr-thead">
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>

ajax :

$.ajax({
  url: url,
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var colunas = data.result[0][1].data[1].length;
    var linhas = data.result[0][1].data.length;
    for (var x = 0; x <= colunas - 1; x++) {
      //aqui eu coloco meu cabeçalho
      $("#tr-thead").append('<td>'+data.result[0][0][opcao][x]+'</td>');
    }
    for (var x = 0; x <= linhas - 1; x++) {
      $("#tbody").append('<tr>');
      for (var y = 0; y <= colunas - 1; y++) {
        //aqui as linhas com os dados
        $("#tbody").append('<td>'+data.result[0][1].data[x][y]+'</td>');
      }
      $("#tbody").append('</tr>');
    }
  },
  error: function() {
    console.log("error");
  } 
});

O problema é que nao ta sendo inserido corretamente, tipo, no tbody ta abrindo e fechando a tag <tr> e depois inserindo as <td>.

Outra coisa tbm é que o thead não aparece.

1
  • 2
    Por que você não concatena tudo em uma string e depois insere de uma vez só? Dependendo do número de registros, você irá perceber uma boa diferença no desempenho do browser.
    – Oeslei
    Commented 18/03/2015 às 14:29

1 Resposta 1

2

Olá fiz uma simulação sem o ajax para facilitar, mas o contexto é o mesmo.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<table class="table table-hover">
    <thead id="thead"><tr id="tr-thead"></tr></thead>
    <tbody id="tbody"></tbody>
</table>

<script>
$(document).ready(function() {
    // Aqui apenas troquei o td pelo th
    $("#tr-thead").append('<th>th 1</th>');
    $("#tr-thead").append('<th>th 2</th>');
    $("#tr-thead").append('<th>th 3</th>');

    for (var x = 0; x < 3; x++) {
        // Aqui anexo 1 tr ao tbody, já com o /tr com um id únixo
        $("#tbody").append('<tr id="tr-body'+x+'"></tr>');
        newtd = ''; // (re)inicia a variavel dos tds
        for (var y = 0; y < 3; y++) {
            // Aqui concateno todos os tds de um tr
            newtd = newtd.concat('<td>td linha '+x+', coluna '+y+'</td>');
        }
        // Aqui enfim, anexo o td a um tr
        $("#tr-body"+x).append(newtd);
    }
});
</script>

Agora só você substituir os dados dos fors pelos seus dados ajax e boa sorte. Espero ter auxiliado

1
  • obrigado @Gê Bender
    – Furlan
    Commented 18/03/2015 às 16:56

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 .