JAVA SCRIPT - Deleting Rows from an HTML Table - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript JAVA SCRIPT - Deleting Rows from an HTML Table - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Saturday, December 29, 2018

JAVA SCRIPT - Deleting Rows from an HTML Table

Deleting Rows from an HTML Table


Problem

You want to remove one or more rows from an HTML table. 

Solution

Use the removeChild() method on an HTML table row, and all of the child elements, including the row cells, are also removed:


var parent = row.parentNode;
var oldrow = parent.removeChild(parent);

EXPLAIN

When you remove an element from the web document, you’re not only removing the element, you’re removing all of its child elements. In this DOM pruning you get a ref‐ erence to the removed element if you want to process its contents before it’s completely discarded. The latter is helpful if you want to provide some kind of undo method in case the person accidentally selects the wrong table row. 

To demonstrate the nature of DOM pruning, in Example 5-5, DOM methods crea teElement() and createTextNode() are used to create table rows and cells, as well as the text inserted into the cells. As each table row is created, an event handler is attached to the row’s click event. If any of the new table rows is clicked, a function is called that removes the row from the table. The removed table row element is then traversed and the data in its cells is extracted and concatenated to a string, which is printed out.

Adding and removing table rows and associated table cells and data :


<!DOCTYPE html>
<head>
<title>Adding and Removing Elements</title>
<style>
table {
 border-collapse: collapse;
}
td, th {
 padding: 5px;
 border: 1px solid #ccc;
}
tr:nth-child(2n+1)
{
 background-color: #eeffee;
}
</style>
</head>
<body>
<table id="mixed">
 <tr><th>Value One</th><th>Value two</th><th>Value three</th></tr>
</table>
<div id="result"></div>
<script>
 var values = new Array(3);
 values[0] = [123.45, "apple", true];
 values[1] = [65, "banana", false];
 values[2] = [1034.99, "cherry", false];
 var mixed = document.getElementById("mixed");
 var tbody = document.createElement("tbody");
 // for each outer array row
 for (var i = 0 ; i < values.length; i++) {
 var tr = document.createElement("tr");
 // for each inner array cell
 // create td then text, append
 for (var j = 0; j < values[i].length; j++) {
var td = document.createElement("td");
 var 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() {
 // remove row
 var parent = this.parentNode;
 var oldrow = parent.removeChild(this);
 // datastring from removed row data
 var datastring = "";
 for (var i = 0; i < oldrow.childNodes.length; i++) {
 var cell = oldrow.childNodes[i];
 datastring+=cell.firstChild.data + " ";
 }
// output message
 var msg = document.createTextNode("removed " + datastring);
 var p = document.createElement("p");
 p.appendChild(msg);
 document.getElementById("result").appendChild(p);
 }
</script>
</body>

No comments:

Post a Comment

Post Top Ad