Javascript DOM Element Add and Remove

Description

Javascript DOM Element Add and Remove

View in separate window 


<!DOCTYPE html>
<head>
<title>Adding and Removing Elements</title>
<style>
table {//from  ww w .j  a v a2s .c  o  m
   border-collapse: collapse;
}
td, th {
   padding: 5px;
   border: 1px solid #ccc;
}
tr:nth-child(2n+1)
{
   background-color: #eeffee;
}
</style>
<script>
window.onload=function() {

  let values = new Array(3);
  values[0] = [123.45, "apple", true];
  values[1] = [65, "banana", false];
  values[2] = [1034.99, "cherry", false];

  let mixed = document.getElementById("mixed");

  // IE 7 requires tbody
  let tbody = document.createElement("tbody");

  // for each outer array row
  for (let i = 0 ; i < values.length; i++) {
     let tr = document.createElement("tr");

     // for each inner array cell
     // create td then text, append
     for (let j = 0; j < values[i].length; j++) {
       let td = document.createElement("td");
       let txt = document.createTextNode(values[i][j]);
       td.appendChild(txt);
       tr.appendChild(td);
     }

     // attache event handler
     tr.onclick=prunerow;

     // append row to table
     tbody.appendChild(tr);
     mixed.appendChild(tbody);
   }
}

function prunerow() {
  let parent = this.parentNode;
  let oldrow = parent.removeChild(this);

  let datastring = "";
  for (let i = 0; i < oldrow.childNodes.length; i++) {
    let cell = oldrow.childNodes[i];
    datastring+=cell.firstChild.data + " ";
  }

  console.log("removed " + datastring);
}
</script>

</head>
<body>
<table id="mixed">
<tr><th>Value One</th><th>Value two</th><th>Value three</th></tr>
</table>
</body>
</html>



PreviousNext

Related