Dynamically remove rows in DOM table
I am having trouble with the removeChild function in the loop below and couldnt really find good examples for it? what is wrong with my code?
var univArray = new Array(
{name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tuition: 27204, room: 8680},
{name: "University of California, Berkeley", nick: "UC Berkeley", ownership: "public", sys: "University of California", SATh: 1440, SATl: 1170, tuition: 4200, room: 10608},
{name: "University of California, Santa Cruz", nick: "UC Santa Cruz", ownership: "public", sys: "University of California", SATh: 1270, SATl: 1030, tuition: 4384, room: 9708},
{name: "San Francisco State University", nick: "SFSU", ownership: "public", sys: "CalState", SATh: 1120, SATl: 850, tuition: 1826, room: 6736},
{name: "San Jose State University", nick: "SJSU", ownership: "public", sys: "CalState", SATh: 1140, SATl: 860, tuition: 1912, room: 7395},
{name: "Sonoma State University", nick: "Sonoma State", ownership: "public", sys: "CalState", SATh: 1140, SATl: 930, tuition: 2226, room: 9606},
{name: "California State University, Hayward", nick: "CalState Hayward", ownership: "public", sys: "CalState", SATh: 1050, SATl: 810, tuition: 1800, room: 6435},
{name: "University of San Francisco", nick: "USF", ownership: "private", sys: "Roman Catholic", SATh: 1240, SATl: 1030, tuition: 21780, room: 9080},
{name: "Santa Clara University", nick: "SCU", ownership: "private", sys: "Roman Catholic", SATh: 1300, SATl: 1110, tuition: 23445, room: 8904},
{name: "Mills College", nick: "Mills College", ownership: "private", sys: "n/a", SATh: 1130, SATl: 920, tuition: 19482, room: 7832}
);
var table = document.createElement("table")
document.body.appendChild(table)
table.setAttribute("id", "tableid")
var tbody = document.createElement("tbody")
table.appendChild(tbody)
var row = document.createElement("tr")
tbody.appendChild(row)
header =document.createElement("th")
row.appendChild(header)
header.appendChild(document.createTextNode("Name"))
header =document.createElement("th")
row.appendChild(header)
header.appendChild(document.createTextNode("Sat High"))
header =document.createElement("th")
row.appendChild(header)
header.appendChild(document.createTextNode("Sat Low"))
header =document.createElement("th")
row.appendChild(header)
header.appendChild(document.createTextNode("Tuition"))
header =document.createElement("th")
row.appendC开发者_JS百科hild(header)
header.appendChild(document.createTextNode("Room and Board"))
for (var i = 0; i < univArray.length; i++) {
var tbody = document.createElement("tbody")
table.appendChild(tbody)
var row = document.createElement("tr")
tbody.appendChild(row)
cell = document.createElement("td")
row.appendChild(cell)
cell.appendChild(document.createTextNode(univArray[i].name))
cell = document.createElement("td")
row.appendChild(cell)
cell.appendChild(document.createTextNode(univArray[i].SATh))
cell = document.createElement("td")
row.appendChild(cell)
cell.appendChild(document.createTextNode(univArray[i].SATl))
cell = document.createElement("td")
row.appendChild(cell)
cell.appendChild(document.createTextNode(univArray[i].tuition))
cell = document.createElement("td")
row.appendChild(cell)
cell.appendChild(document.createTextNode(univArray[i].room))
}
function filter(){
if (document.getElementById("public").checked) {
var nodes = document.body.getElementsByTagName('tr')
for (var z = 0; z < univArray.length; z++) {
var node = nodes[z];
if (univArray[z].ownership != "public") {
node.parentNode.removeChild(node)
}
}
}
}
document.getElementById("update").onclick = filter;
getElementsByTagName
returns a NodeList and as W3C says: "NodeList objects in the DOM are live.". This means when you remove a node from you DOM tree, it's also removed from your nodes
list variable. So you need always remove the first element of your list:
var node = nodes[0];
if (univArray[z].ownership != "public") {
node.parentNode.removeChild(node)
}
Thanks for your help. I tried following your suggestion, but the if statement seems to be getting ignored. Here's what I have now:
function filter(){
if (document.getElementById("public").checked) {
var nodes = document.body.getElementsByTagName('tr')
for (var z = 0; z < nodes.length; z++) {
var node = nodes[1];
if (univArray[z].ownership != "public") {
node.parentNode.removeChild(node)
}
}
}
if (document.getElementById("private").checked) {
var nodes = document.body.getElementsByTagName('tr')
for(var i=0; i <univArray.length; i++ ) {
//Don't want to delete header row so we start at 1
var node= nodes[1];
if (univArray[i].ownership != "private") {
node.parentNode.removeChild(node)
}
}
}
}
Although the user Isaac seems to be inactive here comes a possible solution.
My initial code:
<table align="center" border="1" cellpadding="15" cellspacing="10" >
<tr>
<th colspan="7"> Headline </th>
</tr>
<tr>
<td>colmun</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
</tr>
<tr>
<td>colmun</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
</tr>
</table>
The task: removing the rows except the first.
What I had tried before:
var tableObj = document.getElementsByTagName("table")[0];
var coloumns = tableObj.getElementsByTagName("tr");
for(var i=0; i < coloumns.length; i++ )
{
coloumns[i].parentNode.removeChild(coloumns[i]);
}
And I didn't get the expected result.
When I found the post from meze, I replaced the the for()
loop by do{} while()
:
var tableObj = document.getElementsByTagName("table")[0];
var coloumns = tableObj.getElementsByTagName("tr");
do {
coloumns[0].parentNode.removeChild(coloumns[0]);
} while (coloumns.length > 1)
and so I got the expected result.
精彩评论