How to remove and add a certain TD

Question

How to remove and add a certain TD

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Within each tr there are several buttons (add and remove) and their respective td (s), how do I know that certain tr should I delete if I click on one of the add or rem buttons? Also wanted to add a new tr of class patients just below the other three? The jsfiddle follows: link

            <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

asked by anonymous 19.06.2015 / 16:44

2 answers

2

Changes 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 closest tr element so you can clone or delete it. It could look like this:

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

Then you need an event dropper to detect if you have loaded a input[type=button] to do what you want. It may look 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: link

19.06.2015 / 17:19

Incorrect jQuery Array Select to List data from another table

score 1 · Accepted Answer

I made an example with data via prompt, take a look and adapt as needed. Remember 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>