Javascript 动态删除DOM表中的行

Javascript 动态删除DOM表中的行,javascript,dom,removechild,Javascript,Dom,Removechild,我在下面的循环中遇到了removeChild函数的问题,并且找不到很好的例子?我的代码有什么问题 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 Calif

我在下面的循环中遇到了removeChild函数的问题,并且找不到很好的例子?我的代码有什么问题

    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.appendChild(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;
var univArray=新数组(
{姓名:“斯坦福大学”,尼克:“斯坦福”,所有权:“私人”,系统:“不适用”,SATh:1550,SATl:1360,学费:27204,房间:8680},
{姓名:“加州大学伯克利分校”,尼克:“加州大学伯克利分校”,所有权:“公共”,系统:“加州大学”,SATh:1440,SATl:1170,学费:4200,房间:10608},
{姓名:“加州大学圣克鲁斯分校”,尼克:“加州大学圣克鲁斯分校”,所有权:“公共”,系统:“加州大学”,SATh:1270,SATl:1030,学费:4384,房间:9708},
{姓名:“旧金山州立大学”,尼克:“旧金山州立大学”,所有权:“公共”,系统:“加州州立大学”,SATh:1120,SATl:850,学费:1826,房间:6736},
{名称:“圣何塞州立大学”,尼克:“SJSU”,所有权:“公共”,系统:“加州州立大学”,SATh:1140,SATl:860,学费:1912,房间:7395},
{姓名:“索诺玛州立大学”,尼克:“索诺玛州立大学”,所有权:“公共”,系统:“加州州立大学”,SATh:1140,SATl:930,学费:2226,房间:9606},
{姓名:“加州州立大学,海沃德”,尼克:“加州州立大学海沃德”,所有权:“公共”,系统:“加州州立大学”,SATh:1050,SATl:810,学费:1800,房间:6435},
{姓名:“旧金山大学”,尼克:“USF”,所有权:“私人”,系统:“罗马天主教”,SATh:1240,SATl:1030,学费:21780,房间:9080},
{姓名:“圣克拉拉大学”,尼克:“SCU”,所有权:“私人”,系统:“罗马天主教”,SATh:1300,SATl:1110,学费:23445,房间:8904},
{姓名:“米尔斯学院”,尼克:“米尔斯学院”,所有权:“私人”,系统:“不适用”,SATh:1130,SATl:920,学费:19482,房间:7832}
);
var table=document.createElement(“表”)
document.body.appendChild(表)
table.setAttribute(“id”、“tableid”)
var tbody=document.createElement(“tbody”)
表2.附件子项(t正文)
var行=document.createElement(“tr”)
tbody.appendChild(第行)
标题=document.createElement(“th”)
行。追加子项(标题)
header.appendChild(document.createTextNode(“名称”))
标题=document.createElement(“th”)
行。追加子项(标题)
header.appendChild(document.createTextNode(“Sat High”))
标题=document.createElement(“th”)
行。追加子项(标题)
header.appendChild(document.createTextNode(“Sat-Low”))
标题=document.createElement(“th”)
行。追加子项(标题)
header.appendChild(document.createTextNode(“学费”))
标题=document.createElement(“th”)
行。追加子项(标题)
header.appendChild(document.createTextNode(“Room and Board”))
对于(var i=0;i
getElementsByTagName
返回节点列表,正如W3C所说:“DOM中的节点列表对象是活动的。”。这意味着当您从DOM树中删除节点时,它也将从
节点
列表变量中删除。因此,您需要始终删除列表中的第一个元素:

var node = nodes[0];
if (univArray[z].ownership != "public") {
    node.parentNode.removeChild(node)
}

谢谢你的帮助。我试着按照你的建议去做,但是if语句似乎被忽视了。以下是我现在拥有的:

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)
          }     
      }
   }
}
函数过滤器(){
if(document.getElementById(“public”).checked){
var nodes=document.body.getElementsByTagName('tr')
对于(var z=0;z对于(var i=0;i尽管用户Isaac似乎不活动,但这里有一个可能的解决方案

我的初始代码:

 <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>

所以我得到了预期的结果。

你能解释一下当你执行当前代码时会发生什么吗?如果可能的话,你能附加完整的代码,也就是JSON代码吗?我正在尝试循环一个数组,并删除表中与函数filter()中的If语句不匹配的行。所有代码都已添加。哪个If语句不起作用?此外,如果要跳过一行,则应减少迭代次数,即:
for(var z=1;
for(var i=1;
两者。它只是删除了前三列。没有所有的代码,很难说有什么问题。我还尝试用
document.body.getElementsByTagName('tr')
替换
document.getElementById(“tableid”).getElementsByTagName('tr')
+1来获取重要信息。现在我可以
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]);
}
var tableObj = document.getElementsByTagName("table")[0];
var coloumns = tableObj.getElementsByTagName("tr");
do {
  coloumns[0].parentNode.removeChild(coloumns[0]);
} while (coloumns.length > 1)