Entrar Ainda não tem acesso?
4
respostas

Excluir linha da tabela pelo checkbox

por Welinton Danschi
| 39.3k xp | 6 posts

Olá, estou tentando criar uma tela que le usuario, cpf e rg e insire numa tabela, a cada nova td na tabela eu coloquei na função um checkbox. eu queria usar esse checkbox para excluir a linha da tabela. como poderia fazer isso?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Teste01</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script src="./main.js"></script>

    <section>
        <form>
            <div>
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="Digite seu nome aqui" autofocus/>
            </div>
            <div>
                <label for="cpf">CPF:</label>
                <input id="cpf" name="cpf" type="number" placeholder="Digite seu CPF" />
            </div>
            <div>
                <label for="rg">RG:</label>
                <input id="rg" name="rg" type="number" placeholder="Digite seu RG" />
            </div>

            <button id="adicionarBotao" onclick="adicionarItem()" type="button">Adicionar</button>
            <button id="editarBotao" onclick="" type="button">Editar</button>
        </form>
    </section>

    <table>
        <thead>
            <tr>
                <th>Selecionar</th>
                <th>Nome</th>
                <th>CPF</th>
                <th>RG</th>
            </tr>
        </thead>
        <tbody id="tabela">

        </tbody>

    </table>

</body>
</html>

    function adicionarItem() {
        var refNome = document.querySelector("#nome").value;
        var refCpf = document.querySelector("#cpf").value;
        var refRg = document.querySelector("#rg").value;

        var usuarioTr = document.createElement("tr");

        var input = document.createElement('input');
        input.type = 'checkbox';
        var nomeTd = document.createElement("td");
        var cpfTd = document.createElement("td");
        var rgTd = document.createElement("td");


        nomeTd.textContent = refNome;
        cpfTd.textContent = refCpf;
        rgTd.textContent = refRg;

        usuarioTr.appendChild(input);
        usuarioTr.appendChild(nomeTd);
        usuarioTr.appendChild(cpfTd);
        usuarioTr.appendChild(rgTd);        

        var tabela = document.querySelector("#tabela");

        tabela.appendChild(usuarioTr);
    }
4 respostas
por Tais Batuira
| 202.9k xp | 280 posts
Instrutor Desenvolvedora Mobile Android & iOS - Alura

Oi Welinton,

Qual curso você está fazendo exatamente? Fica mais fácil quando coloca a categoria, mas está como Off Topic... Você pode nos informar o curso? Assim poderemos te ajudar!! :)

por Welinton Danschi
| 39.3k xp | 6 posts

Estou fazendo o de JavaScript 1

por Daniel Omnion
| 1014.4k xp | 1150 posts

Talvez estes links ajudem:

http://bytutorial.com/blogs/javascript/add-and-delete-table-row-in-javascript

https://stackoverflow.com/questions/6081418/dynamicaly-delet-the-table-row-using-check-box-and-javascript
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Welinton, tudo bom? Você precisa criar uma função e atribuir ela a um botão "apagar selecionados", e nessa função um código que pegue todos os checkbox que estiverem checados, algo nessa linha: 

function apagarSelecionados() {
    var $selecionados = document.querySelectorAll('td [type="checkbox"]:checked') // aqui seleciona todos os elementos checados
    for(let i = 0; i < $selecionados.length; i++) {
        $selecionados[i].parentNode.parentNode.remove() // aqui vai do elemento input voltando até o td (pode usar um console.log para visualizar melhor)
    }
}

Espero ter ajudado, e segue um link com o código funcionando para você testar também: https://codepen.io/soutomario/pen/brKMvR?editors=1010