DOMテーブル内の行を動的に削除

Question

私は下のループで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; 

Answer 1

getElementsByTagNameのNodeListを返し、W3Cのように述べている： "DOM内のNodeListオブジェクトはライブです。"。つまり、DOMツリーからノードを削除すると、リスト変数のnodesも削除されます。したがって、常にリストの最初の要素を削除する必要があります。

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

Answer 2

ありがとうございます。私はあなたの提案に従ってみましたが、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) 
      }  
     } 
    } 
} 

Answer 3

ユーザー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> 

タスク：最初以外の行を削除します。

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]); 
} 

そして、私は期待した結果を取得できませんでした：私は前にしようとした何

。私はmezeからの投稿を見つけたとき

、私はdo{} while()によってfor()ループ置き換え：

var tableObj = document.getElementsByTagName("table")[0]; 
var coloumns = tableObj.getElementsByTagName("tr"); 
do { 
    coloumns[0].parentNode.removeChild(coloumns[0]); 
} while (coloumns.length > 1) 

をので、私は期待される結果を得ました。