分配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; 
}