How to remove and add a particular TD

Asked

Viewed 568 times

1

Inside eachtr there are several buttons (add and remove) and their respective td(s), how to know which given tr should I delete if I click one of the add or rem Buttons? I also wanted to add a new one tr class patients just below the other tr?
Follow the 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>
javascript html table

  • didn’t understand? What you need to add or remove?

  • if I click the remove button, one should remove the TR that was clicked (remove it add); if I click the add button, add a new TR

  • Why are both buttons classy btnadd? I can change one of them to btnremove?

  • can, is that copy/Paste and forgot to change values

2 answers

2

Sets the classes of buttons that delete to something other than btnadd. So it becomes more logical/semantic what the code does.

You need a function that gives you the element tr closer so you can clone it or erase it. It could be like this:

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

and then you need an event receiver that detects whether you have input[type=button] to do what you want. It can be like this:

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/

  • is giving error in the three already created when I try to remove, Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. using the tr.remove() works perfectly

  • @Maiconcarraro interesting this error. It doesn’t make much sense because this is the element table... I did it differently and I’ll look into it. Thank you!

  • Yeah, I even gave a.log console on. this and apparently it was supposed to work, the weird thing is it works for the new and not the old.

  • Any reason you prefer removeChild instead of remove?

  • 1

    @Maiconcarraro is because the .remove() does not work in IE: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

  • 1

    I’ll fix it in mine then :)

Show 1 more comment

1


I made an example with data via prompt, take a look and adapt as your need. Remembering Sergio’s advice on semantics.

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>

  • @Sergio o event isn’t it always implied? I’ll always have the MouseClick or speaks for being good practice?

  • 1

    In fact, I’ll correct

  • Thank you as always :)

Browser other questions tagged javascript html table

You are not signed in. Login or sign up in order to post.