分配 ID 并遍历 Javascript 中的行

Question

我创建了一个 table，它似乎工作正常，但我在为这个 table 分配一个 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

编辑

您似乎不知道如何从 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 2

你可以这样做：

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

分配 ID 并遍历 Javascript 中的行

Assign Id and iterate through rows in Javascript

html

javascript

for-loop

html-table

getelementbyid

编辑

旧答案