Aggiungi / elimina riga da una tabella

Ho questa tabella con alcune informazioni dipendenti e c’è un pulsante Aggiungi ed Elimina per ogni riga per aggiungere / eliminare ulteriori dipendenti. Quando faccio clic sul pulsante “aggiungi”, una nuova riga viene aggiunta alla tabella, ma quando faccio clic sul pulsante “Elimina”, cancella prima la riga di intestazione e quindi al successivo clic, cancella la riga corrispondente.

Ecco cosa ho:

Codice Javascript

function deleteRow(row){ var d = row.parentNode.parentNode.rowIndex; document.getElementById('dsTable').deleteRow(d); } 

Codice HTML

 
Relationship Type Date of Birth Gender
Spouse 1980-22-03 female <input type="button" id ="addDep" value="Add" onclick = "add()" <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"
Child 2008-23-06 female <input type="button" id ="addDep" value="Add" onclick = "add()" <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"

JavaScript con alcune modifiche:

 function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } 

E l’HTML con una piccola differenza:

 
Relationship Type Date of Birth Gender
Spouse 1980-22-03 female
Child 2008-23-06 female
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery ha una bella funzione per rimuovere elementi dal DOM .

La funzione più vicina () è interessante perché “ottiene il primo elemento che corrisponde al selettore testando l’elemento stesso e attraversando i suoi antenati”.

$(this).closest("tr").remove();

Ogni pulsante di cancellazione può eseguire quel codice molto succinto con una chiamata di funzione.

Ecco il codice JS Bin usando jQuery. Testato su tutti i browser. Qui, dobbiamo fare clic sulle righe per eliminarlo con un bell’effetto. Spero che sia d’aiuto.

Ciao vorrei fare qualcosa di simile a questo:

 var id = 4; // inital number of rows plus one function addRow(){ // add a new tr with id // increment id; } function deleteRow(id){ $("#" + id).remove(); } 

e avrei una tabella come questa:

 
Relationship Type Date of Birth Gender
Spouse 1980-22-03 female
Child 2008-23-06 female

Inoltre, se vuoi, puoi creare un loop per build il tavolo. Quindi sarà facile build il tavolo. Lo stesso che puoi fare con la modifica 🙂

Suggerisco di usare jQuery. Quello che stai facendo in questo momento è facile da ottenere senza jQuery, ma dal momento che vorrai nuove funzionalità e più funzionalità, jQuery ti farà risparmiare un sacco di tempo. Vorrei anche ricordare che non dovresti avere più elementi DOM con lo stesso ID in un documento. In tal caso, usa l’attributo class.

html:

 
Relationship Type Date of Birth Gender
Spouse 1980-22-03 female
Child 2008-23-06 female

javascript:

 $('body').on('click', 'input.deleteDep', function() { $(this).parents('tr').remove(); }); 

Ricorda che devi fare riferimento a jQuery:

Ecco un esempio di jsfiddle funzionante: http://jsfiddle.net/p9dey/1/

Vorrei provare a formattare correttamente la tabella prima in questo modo:

Non posso fare a meno di pensare che la formattazione del tavolo potrebbe almeno non causare alcun danno.

  ...... .... ...... 
Header1
Content1

Molte buone risposte, ma eccone un’altra;)

È ansible aggiungere il gestore per il clic alla tabella

 

E poi basta scoprire qual è stato il target dell’evento

 function tableclick(e) { if(!e) e = window.event; if(e.target.value == "Delete") deleteRow( e.target.parentNode.parentNode.rowIndex ); } 

Quindi non devi aggiungere gestori di eventi per ogni riga e il tuo html sembra più ordinato. Se non vuoi alcun javascript nel tuo html puoi anche aggiungere il gestore quando la pagina viene caricata:

 document.getElementById('dsTable').addEventListener('click',tableclick,false); 

Ecco il codice funzionante: http://jsfiddle.net/hX4f4/2/