分配Id并遍历Javascript中的行

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

Answer 2

编辑

看来你不知道如何正确地创建从JavaScript中的DOM：

http://www.w3schools.com/jsref/met_document_createelement.asp

老答案

此线路：

var rows = document.getElementById("orders").rows.length;//why is this null? 

通过id从HTML文档获取元素。看起来您还没有将tableContent添加到文档中。

Answer 3

这里是我的建议（阅读代码中的注释）：

// This will create a table element and return it 

function createTable(list){ 
    var table = document.createElement('table'); // This is an actual html element 
    table.id = 'orders'; // Since it's an html element, we can assign an id to it 

    tableHtml = ''; // This empty string will hold the inner html of the table we just created 
    for (var i = 0; i < list.length; ++i) { 
     var record = list[i]; 

     // we can assign the id here instead of looping through the rows again 
     tableHtml += '<tr id="row-' + i + '"><td>' + record.Title + '</td></tr>'; 
    } 
    table.innerHTML = tableHtml; // We insert the html into the table element and parse it 

    var rows = table.rows.length; // We already have a reference to the table, so no need of getElementById 

    alert('rows'); // rows holds the number of rows. You can do whatever you want with this var. 

    return table; // return the table. We still need to insert it into the dom 
} 


// Create a new table and hold it in memory 
var myTable = createTable([{Title:'One'}, {Title:'Two'}, {Title:'Three'}]); 

// Inset the newly created table into the DOM 
document.getElementById('parent-of-table').appendChild(myTable); 

希望这有助于

这已经回答了，但这里是我的版本，而所有评论：

function createTable(list){ 
    var table = document.createElement('table'); 
    table.id = 'orders'; 
    tableHtml = ''; 
    for (var i = 0; i < list.length; ++i) { 
     tableHtml += '<tr id="row-' + i + '"><td>' + list[i].Title + '</td></tr>'; 
    } 
    table.innerHTML = tableHtml; 
    var rows = table.rows.length; 
    alert('rows'); 
    return table; 
}