1 
function load(){
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
    var tablebody = document.getElementById("classestable");
    tablebody.innerHTML += "<tbody></tbody>";
    tablebody.getElementsByTagName("tbody").innerHTML = "";
    for(var i=0;i<15;i++){
        tablebody.getElementsByTagName("tbody").innerHTML += row;
    }
}

上記のコードは、の内容がrowに追加されないことを除いて、正常に実行されtbodyます。

console.logの内容rowが有効なhtmlであり、コンソールにエラーがないことを示しています。なぜ追加されないのですか？

4

4 に答える 4

3

getElementsByTagNameはNodeListを返し、ノードのインデックスを使用して最初のノードにアクセスします

コードを次のように変更します

var innerRow = "";

for(var i=0;i<15;i++){
    innerRow += row;
}

tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow

このようにして、DOMを15回ではなく1回だけスキャンします

于 2012-12-14T03:26:15.033 に答える
2

innerHTMLInternet Explorerのテーブルでは使用できず、単一のノードではなく戻り値をgetElementsByTagName返します。さらに、テーブルにはプロパティがあります。NodeListtBodies

改訂されたコードは次のようになります。

function load(){
  var tr = document.createElement('tr'), td;
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select>";
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<input id=\"choosemods\" type=\"text\" />";
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<input id=\"choosegrade\" type=\"text\" />";
  var tablebody = document.getElementById("classestable").tBodies[0];
  for(var i=0;i<15;i++){
      tablebody.appendChild(tr.cloneNode(true));
  }
}
于 2012-12-14T03:18:49.200 に答える
1

の代わりにクエリセレクタを使用してみてくださいgetElementsByTagName。

document.querySelector('#classettable tbody').innerHTML += row;
于 2012-12-14T03:20:00.403 に答える
0

ループが実行されるたびにdomに追加しても意味がありません。それをhtml変数に追加し、1つのdomトランザクションを実行します。

function load(){
    var html= '';
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
    var tablebody = document.getElementById("classestable");
    tablebody.innerHTML += "<tbody></tbody>";
    tablebody.getElementsByTagName("tbody").innerHTML = "";
    for(var i=0;i<15;i++){
        html += row;
    }
    tablebody.getElementsByTagName("tbody")[0].innerHTML = html;// Select first element from array of nodes
}
于 2012-12-14T03:19:12.677 に答える