Comment puis-je ajouter/supprimer une ligne de table en utilisant JavaScript?

Je cherche une technique simple et efficace pour ajouter ou supprimer une ligne dans une table html en utilisant JavaScript. (Sans utilisant jQuery)Comment puis-je ajouter/supprimer une ligne de table en utilisant JavaScript?

Source

2010-06-20 Sakshi Jain

La meilleure façon d'écrire un tel code serait d'utiliser un éditeur :) (et vous n'avez pas besoin de jQuery pour cela;)) –

@Felix King un bon mec :-) –

Où se base l'aversion jQuery? Vous ne vous retrouveriez qu'avec 5 fois plus de code. – BalusC

J'ai écrit ce il y a un mois ... Son pas la meilleure façon

<html> 
<head> 
     <title> 
       Crap work 
     </title> 
<script type="text/javascript"> 

function add_row() 
{ 
     var table = document.getElementById('table'); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "text"; 
     cell1.appendChild(element1);  
      var cell2 = row.insertCell(1); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     cell2.appendChild(element2); 
     var cell3 = row.insertCell(2); 
     cell3.innerHTML = ' <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>'; 
     cell3.setAttribute("style", "display:none;"); 
     var cell4 = row.insertCell(3); 
     cell4.innerHTML = '<span onClick="save(this)">Save</span>'; 
} 


function save(e) 
{ 
    var elTableCells = e.parentNode.parentNode.getElementsByTagName("td"); 
    elTableCells[0].innerHTML=elTableCells[0].firstChild.value; 
    elTableCells[1].innerHTML=elTableCells[1].firstChild.value; 
    elTableCells[2].setAttribute("style", "display:block;"); 
    elTableCells[3].setAttribute("style", "display:none;"); 
} 
function edit(e) 
{ 
    var elTableCells = e.parentNode.parentNode.getElementsByTagName("td"); 
    elTableCells[0].innerHTML='<input type="text" value="'+elTableCells[0].innerHTML+'">'; 
    elTableCells[1].innerHTML='<input type="text" value="'+elTableCells[1].innerHTML+'">'; 
    elTableCells[2].setAttribute("style", "display:none;"); 
    elTableCells[3].setAttribute("style", "display:block;"); 
} 

function delete_row(e) 
{ 
    e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); 
} 
</script> 
</head> 
<body > 
    <div id="display"> 
    <table id='table'> 
     <tr id='id'> 
      <td> 
       Piemesons 
      </td> 

      <td> 
        23 
      </td> 
      <td > 
       <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span> 
      </td> 
      <td style="display:none;"> 
       <span onClick="save(this)">Save</span> 
      </td> 
     </tr> 
    </table>  
     <input type="button" value="Add new row" onClick="add_row();" /> 
    </div> 
</body>

Source

2010-06-20 20:27:22

var theTable = document.getElementById("theTable"); 
theTable.deleteRow(0); //0 being first row.

Source

2010-06-20 20:34:45 Babiker

OUI. C'est si simple. Alors que le DOM est loin d'être parfait, il n'est généralement pas si difficile. –

Comment puis-je ajouter/supprimer une ligne de table en utilisant JavaScript?

Répondre

Questions connexes