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>
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment