Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Adicionar e remover TR

por Alberto Vieira Lima
| 319k xp | 27 posts

Olá pessoal um help :)

Estou adicionando uma TR de uma TABLE mas também preciso excluir se for necessário isso dinâmiamente.

Para adicionar a nova linha esta dando certo mas ao tentar remover não .

Se alguém puder ajudar.

O código é o abaixo:

<html>
<script>

function removerTR(){
        alert("Chegou aqui");
        document.getElementById(this).remove();
}

function adicionarTR(){
        // // Quantidade de linha da tabela
        var qtdRows = document.getElementById("tblListaProduto").rows.length;

        var table = document.getElementById("tblListaProduto");
        var newRow = table.insertRow(qtdRows);
        var chave = "composto_" + qtdRows
        newRow.id = chave;

        // add cells to the row
        var cel1 = newRow.insertCell(0);
        var cel2 = newRow.insertCell(1);
        var cel3 = newRow.insertCell(2);
        var cel4 = newRow.insertCell(3);
        var cel5 = newRow.insertCell(4);
        var cel6 = newRow.insertCell(5);
        var cel7 = newRow.insertCell(6);

        // add values to the cells
        cel1.innerHTML = "";
        cel2.innerHTML = "";
        cel3.innerHTML = "";
        cel4.innerHTML = "0.00";
        cel5.innerHTML = "1";
        cel6.innerHTML = "UN";
        cel7.innerHTML = "<input type='text' value='" + chave + "'><a href='#' onClick='removerTR();'>Excluir</a>";
}

</script>
    <body>
<table class="table table-bordered">
    <button onclick="adicionarTR();">Add</button>
    <thead>
        <tr class="active">
            <th>Cód. produto</th>
            <th>Categoria</th>
            <th>Produto</th>
            <th>Valor</th>
            <th class="text-center">Quantidade</th>
            <th class="text-center">Tipo</th>
            <th><center>Ação</center></th>
        </tr>
    </thead>
    <tbody id="tblListaProduto">
        <tr>

        </tr>

    </tbody>
</table> 
    </body>
</html>
3 respostas
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Alberto, tudo bom?

Acredito que o problema aqui:

function removerTR(){
        alert("Chegou aqui");
        document.getElementById(this).remove();
}


<button onclick="adicionarTR();">Add</button>

Você precisa passar para a função removerTR o id da tr que você quer remover, como você está adicionando todas dinamicamente, elas não possuem um ID, uma abordagem seria sempre remover a ultima;

function removerTR(){
        alert("Chegou aqui");
        let trs = document.querySelector("tr");
        trs[trs.length - 1].remove();
}

Espero ter ajudado.

Abraços!

por Alberto Vieira Lima
| 319k xp | 27 posts

Obrigado André mas infelizmente não deu certo.

solução!
por Alberto Vieira Lima
| 319k xp | 27 posts

André, resolvi da seguinte maneira:

function removerTR(id){
        id.remove();
}

function adicionarTR(){
        // // Quantidade de linha da tabela
        var qtdRows = document.getElementById("tblListaProduto").rows.length;

        var table = document.getElementById("tblListaProduto");
        var newRow = table.insertRow(qtdRows);
        var chave = "composto_" + qtdRows
        newRow.id = chave;

        // add cells to the row
        var cel1 = newRow.insertCell(0);
        var cel2 = newRow.insertCell(1);
        var cel3 = newRow.insertCell(2);
        var cel4 = newRow.insertCell(3);
        var cel5 = newRow.insertCell(4);
        var cel6 = newRow.insertCell(5);
        var cel7 = newRow.insertCell(6);

        // add values to the cells
        cel1.innerHTML = "";
        cel2.innerHTML = "";
        cel3.innerHTML = "";
        cel4.innerHTML = "0.00";
        cel5.innerHTML = "1";
        cel6.innerHTML = "UN";
        cel7.innerHTML = "<input type='text' value='" + chave + "'><a href='#' onClick='removerTR(" + "composto_" + qtdRows + ");'>Excluir</a>";
}

Achei um pouco estranho mas ta funcionando.