使用 javascript 循环遍历 html 表格单元格

Question

我正在努力循环遍历表格单元格并在其中插入值。但我不知道我的代码有什么问题。请帮助我。我知道有一些愚蠢的错误。请告诉我这是什么。 这是我的代码-

 var data = response.datas.length;
              var table = document.getElementById('itemsval');
              for(var i=0; i<data; i++ ){
                var row = table.insertRow(i);
                for(var j=0; j<7; j++){
                 var cell = row.insertCell(j);


                cell[i][j].innerHTML = response.datas[i].p_name;
                 cell[i][j].innerHTML = response.datas[i].p_details;
                 cell[i][j].innerHTML = response.datas[i].p_qty;
                 cell[i][j].innerHTML = response.datas[i].p_rate;
                 cell[i][j].innerHTML = response.datas[i].p_dis;
                 cell[i][j].innerHTML = response.datas[i].p_tax;
                 cell[i][j].innerHTML = response.datas[i].p_tot; 
                }

              }

我不断收到错误 - 无法读取未定义的属性“0”

提前致谢。

Answer 1

在第一次迭代时，这条线

cell[i][j].innerHTML = response.datas[i].p_name;

尝试访问cell 内名为0 的属性。 cell 不会有一个名为 0 的属性（来自变量 i）。如果是这样，那么该属性的值也不会有名称为 0 的属性（来自变量 j）。

分别，重复写入同一个地方：

cell[i][j].innerHTML = response.datas[i].p_name;
cell[i][j].innerHTML = response.datas[i].p_details;

...会导致后面的值覆盖前面的值。

相反，您想在行中添加一个单元格，并设置该单元格的内容。让我们给自己一个方便的函数来做到这一点：

function addCell(row, content) {
    var cell = row.insertCell();
    cell.appendChild(
        document.createTextNode(content)
    );
    return cell;
}

添加单元格，以您不必担心 HTML 标记的方式设置其内容，然后返回单元格。

现在，让我们在您的代码中使用它：

// Get the table
var table = document.getElementById('itemsval');

// Add the rows
response.datas.forEach(function(entry) {
    var row = table.insertRow();
    addCell(row, entry.p_name);
    addCell(row, entry.p_details);
    addCell(row, entry.p_qty);
    addCell(row, entry.p_rate);
    addCell(row, entry.p_dis);
    addCell(row, entry.p_tax);
    addCell(row, entry.p_tot); 
});

注意该代码如何通过Array#forEach 循环通过response.datas 数组。 You have lots of other options （这也是我的答案），但在这种情况下似乎是最简单的。