1

Dentro cadatr há vários buttons (add e remover) e seus respectivos td(s), como saber que determinado tr eu devo eliminar se eu clicar em um dos buttons de add ou rem? Também queria adicionar um novo tr de classe pacientes logo abaixo do outro tr?
Segue o jsfiddle: http://jsfiddle.net/nn40pty3/

            <table id="tabela-1">
                <tr>
                    <th>Nome</th>
                    <th>Peso(kg)</th>
                    <th>Altura(m)</th>
                    <th>IMC</th>
                </tr>
                <tr class="paciente">
                    <td class="info-nome" id="nome-1">Leonardo</td>
                    <td class="info-peso" id="peso-1">57</td>
                    <td class="info-altura" id="altura-1">1.67</td>
                    <td class="info-imc" id="imc-1"></td>
                    <td><input type="button" class="btnadd" value="+" /></td>
                    <td><input type="button" class="btnadd" value="-" /></td>
                </tr>
                <tr class="paciente">
                    <td class="info-nome" id="nome-2">Paulo</td>
                    <td class="info-peso" id="peso-2">100</td>
                    <td class="info-altura" id="altura-2">2.00</td>
                    <td class="info-imc" id="imc-2"></td>
                    <td><input type="button" class="btnadd" value="+" /></td>
                    <td><input type="button" class="btnadd" value="-" /></td>
                </tr>
                <tr class="paciente">
                    <td class="info-nome" id="nome-2">Paulo</td>
                    <td class="info-peso" id="peso-2">100</td>
                    <td class="info-altura" id="altura-2">2.00</td>
                    <td class="info-imc" id="imc-2"></td>
                    <td><input type="button" class="btnadd" value="+" /></td>
                    <td><input type="button" class="btnadd" value="-" /></td>                        
                </tr>
                <tr class="paciente">
                    <td class="info-nome" id="nome-2">Paulo</td>
                    <td class="info-peso" id="peso-2">100</td>
                    <td class="info-altura" id="altura-2">2.00</td>
                    <td class="info-imc" id="imc-2"></td>
                    <td><input type="button" class="btnadd" value="+" /></td>
                    <td><input type="button" class="btnadd" value="-" /></td>                        
                </tr>

</table>
4
  • não entendi? O que você precisa adicionar ou remover?
    – Adir Kuhn
    Commented 19/06/2015 às 14:52
  • se eu clicar no botão remover, deve-se remover o TR que foi clicado (remove-lo complemente); se eu clicar no botão de adicionar, adiciona um novo TR Commented 19/06/2015 às 14:59
  • Porque é que ambos os button têm classe btnadd? posso mudar um deles para btnremove?
    – Sergio
    Commented 19/06/2015 às 15:11
  • pode, é que copy/paste e esqueci de mudar os valores Commented 19/06/2015 às 15:23

2 Respostas 2

2

Muda as classes dos botões que apagam para algo diferente de btnadd. Assim fica mais lógico/semântico o que o código faz.

Precisas de uma função que te dê o elemento tr mais próximo para poderes cloná-lo ou apagá-lo. Poderia ser assim:

function paiTr(el) {
    var tr = el;
    while (tr.tagName.toLowerCase() != 'tr') tr = tr.parentNode;
    return tr;
}

e depois precisas de um oscultador de eventos que detete se carregaste num input[type=button] para fazeres o que queres. Pode ser assim:

document.getElementById('tabela-1').addEventListener('click', function (e) {
    var btn = e.target.type == 'button' && e.target;
    if (!btn) return;
    if (btn.classList.contains('btnadd')) {
        var tr = paiTr(btn).cloneNode(true);
        this.appendChild(tr);
    } else {
        var tr = paiTr(btn);
        tr.parentNode.removeChild(tr);
    }
});

jsFiddle: http://jsfiddle.net/y1qtsbwh/1/

6
  • está a dar erro nos tr já criados quando tento remover, Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. utilizando o tr.remove() funciona perfeitamente Commented 19/06/2015 às 15:36
  • @MaiconCarraro interessante esse erro. Nõ faz muito sentido pois this é o elemento table... Fiz de outra maneira e vou investigar. Obrigado!
    – Sergio
    Commented 19/06/2015 às 15:44
  • Sim, eu até dei um console.log no this e aparentemente era pra funcionar, o mais estranho é funcionar para os novos e não nos antigos. Commented 19/06/2015 às 15:45
  • 1
    @MaiconCarraro é porque o .remove() não funciona no IE: developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
    – Sergio
    Commented 19/06/2015 às 15:54
  • 1
    Irei corrigir isso no meu então :) Commented 19/06/2015 às 15:55
1

Fiz um exemplo com dados via prompt, dê uma olhada e adapte conforme sua necessidade. Lembrando o conselho do Sergio sobre a semântica.

window.onload = function() {

    var acaoBotao = function() {
        var campo = this;
      
        if (campo.value == "+") {
            // pega os elementos pais, td, tr
            var tr = campo.parentNode.parentNode;
          
            // inputs, não estou validando
            var nome = prompt("Informe seu nome: ");
            var peso = prompt("Informe seu peso: ");
            var altura = prompt("Informe sua altura: ");
          
            // clona o tr atual com seus filhos (true)
            var novoTr = tr.cloneNode(true);
            novoTr.getElementsByClassName('info-nome')[0].innerHTML = nome;
            novoTr.getElementsByClassName('info-peso')[0].innerHTML = peso;
            novoTr.getElementsByClassName('info-altura')[0].innerHTML = altura;

            var botoesNovos = novoTr.getElementsByClassName('btnadd');
            for(var i=0;i<botoesNovos.length;i++){
                 botoesNovos[i].addEventListener('click', acaoBotao, false);
            }
            // sobe no pai (table) e adiciona a nova linha
            tr.parentNode.appendChild(novoTr);          
        } else if (campo.value == "-") {
            var tr = campo.parentNode.parentNode;
            // remove o tr selecionado
            tr.parentNode.removeChild(tr);
        }
    };

    var botoes = document.getElementsByClassName("btnadd");
    // adiciona o event nos botoes conforme a classe
    for(var i=0;i<botoes.length;i++){
        botoes[i].addEventListener('click', acaoBotao, false);
    }
}
.btnadd{
    width: 30px;
    height: 30px;
}
<table id="tabela-1">
    <tr>
        <th>Nome</th>
        <th>Peso(kg)</th>
        <th>Altura(m)</th>
        <th>IMC</th>
    </tr>
    <tr class="paciente">
        <td class="info-nome" id="nome-1">Leonardo</td>
        <td class="info-peso" id="peso-1">57</td>
        <td class="info-altura" id="altura-1">1.67</td>
        <td class="info-imc" id="imc-1"></td>
        <td><input type="button" class="btnadd" value="+" /></td>
        <td><input type="button" class="btnadd" value="-" /></td>
    </tr>
    <tr class="paciente">
        <td class="info-nome" id="nome-2">Paulo</td>
        <td class="info-peso" id="peso-2">100</td>
        <td class="info-altura" id="altura-2">2.00</td>
        <td class="info-imc" id="imc-2"></td>
        <td><input type="button" class="btnadd" value="+" /></td>
        <td><input type="button" class="btnadd" value="-" /></td>
    </tr>
    <tr class="paciente">
        <td class="info-nome" id="nome-2">Paulo</td>
        <td class="info-peso" id="peso-2">100</td>
        <td class="info-altura" id="altura-2">2.00</td>
        <td class="info-imc" id="imc-2"></td>
        <td><input type="button" class="btnadd" value="+" /></td>
        <td><input type="button" class="btnadd" value="-" /></td>                        
    </tr>
    <tr class="paciente">
        <td class="info-nome" id="nome-2">Paulo</td>
        <td class="info-peso" id="peso-2">100</td>
        <td class="info-altura" id="altura-2">2.00</td>
        <td class="info-imc" id="imc-2"></td>
        <td><input type="button" class="btnadd" value="+" /></td>
        <td><input type="button" class="btnadd" value="-" /></td>                        
    </tr>
    
</table>

3
  • @Sergio o event não fica sempre implicito? sempre vou ter o MouseClick ou fala por ser uma boa prática? Commented 19/06/2015 às 15:33
  • 1
    De fato, vou corrigir Commented 19/06/2015 às 15:44
  • Obrigado como sempre :) Commented 19/06/2015 às 15:44

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 .