javascript - 在 Javascript 中分配 Id 并迭代行

Question

我创建了一个表，它似乎工作正常，但我在为该表分配 id、计算它有多少行并为每行分配一个 id 时遇到问题。调试器说:

TypeError: document.getElementById(...) is null

我不知道我做错了什么。有人可以帮忙吗？我也在下面的代码中评论了我的问题:

function populateTable(list){
    var tableContent = "<table>";   
    for (var i = 0; i < list.length; ++i) {
          var record = list[i];
        tableContent += "<tr><td>" + record.Title + "</td></tr>\n";
    }   
tableContent += "</table>";
tableContent.id="orders";
var rows = document.getElementById("orders").rows.length;//why is this null? 
document.getElementById("test").innerHTML = rows;   
   for (var i=0; i< rows; ++i){
           //how do I assign an id for the element here? 
   }
}

Answer 1

您可以通过以下方式执行此操作:

HTML:

<div id="here"> </div> <!-- the table will be added in this div -->

JavaScript:

function populateTable(list){
    var tableContent = document.createElement('table');
    for (var i = 0; i < list.length; ++i) {
        var record = list[i];
        var cell = document.createElement('td');
        var row = document.createElement('tr');
        var textnode = document.createTextNode(record.Title);
        cell.appendChild(textnode);
        row.appendChild(cell);
        tableContent.appendChild(row);
    }   
    tableContent.id="orders";
    document.getElementById("here").appendChild(tableContent);  // the table is added to the HTML div element
    var rows = document.getElementById("orders").rows;
    for (var i=0; i < rows.length; ++i){
        rows[i].id = "myId" + (i+1);  // this is how you assign IDs
        console.log(rows[i]);
    }

}

var persons = [{Title:"John"}, {Title:"Marry"}];
populateTable(persons);