1

Tenho a seguinte função:

$("#numeroRequisicao").change(function() {
    var numeroRequisicao = $(this).val();
    $.ajax({
        type: "POST",
        url: "../controller/ajax.selectItemRequisicaoPesquisar.php?numeroRequisicao="+numeroRequisicao,
        dataType: "JSON",
        success: function(res) {
            for(var i=0; i<res.length; i++)
            {
                $("#tab_logic").append('<tr class="text-center"><td>'+i+'</td><td>'+res[i].nome_GAThemocomponente+'</td><td>'+res[i].qtd_GATitemRequisicao+'</td><td>'+res[i].frequencia_GATitemRequisicao+'</td><td>'+res[i].cirurgia_GATitemRequisicao+'</td></tr>');
            }
        }
    });
});

E a seguinte tabela em HTML:

<table class="table table-bordered table-striped" id="tab_logic">
    <thead> 
        <tr>
            <th class="text-center" style="width: 5%;">Indice</th>
            <th class="text-center" style="width: 25%;">Hemocomponente</th>
            <th class="text-center" style="width: 15%;">Quantidade</th>
            <th class="text-center">Frequência (Aviso)</th>
            <th class="text-center">Cirurgia (Aviso)</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Quando o usuario clicar no botão btnPesquisar, a função Ajax vai ser disparada, pega os itens e preenche a tabela, está funcionando corretamente isso, o problema é o seguinte:

Se o usuário escolher a requisição de código 1 e clicar no botão btnPesquisar, vai preencher a tabela com os itens da requisição de código 1, porém se o usuario não der refresh na pagina e quiser ver a requisição de código 2, os itens da requisição de código 2 serão adicionados na tabela sem ela ser limpa, ficando assim, os itens da requisição anteriormente vista junto com os da requisição vista no momento.

Como eu poderia fazer pra limpar a tabela antes de preencher com os novos dados?

1 Resposta 1

1

Gera uma string com tudo e assim já podes apagar tudo de uma vez:

success: function(res) {
    var html = res.reduce(function(string, obj, i) {
      return string + '<tr class="text-center"><td>' + i + '</td><td>' + obj.nome_GAThemocomponente + '</td><td>' + obj.qtd_GATitemRequisicao + '</td><td>' + obj.frequencia_GATitemRequisicao + '</td><td>' + obj.cirurgia_GATitemRequisicao + '</td></tr>'
    }, '');
    $("#tab_logic tbody").html(html);
}
7
  • mas assim a tabela vai perder o thead também?, o seletor seria $("#tab_logic tbody").html(html) 17/09/2017 às 17:39
  • @fernandoandrade caso haja thead e tbody podes usar um selector para ter isso em conta assim: $("#tab_logic tbody").html(html);
    – Sergio
    17/09/2017 às 17:43
  • foi isso que eu quis dizer @sergio, no exemplo da pergunta tem thead e tbodyaí do jeito na resposta vai remover tudo da tabela. 17/09/2017 às 17:47
  • @fernandoandrade ah, não tinha reparado no HTML. Obrigado, corrigi!
    – Sergio
    17/09/2017 às 17:53
  • 1
    Agora funcionou perfeitamente @Sergio. Muito obrigado mesmo! Meus conhecimentos são bem poucos em JS/Jquery e sua resposta foi certeira e de grande ajuda. Obrigado!
    – D. Watson
    18/09/2017 às 13:57

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 .