Javascript，未捕获的类型错误：无法读取未定义的属性“单元格”

Question

我正在尝试使用 Javascript 处理表格。

我有一个创建空表的函数，

//This function will create an empty table of a length of vars+1
//This function will create the header slots as well as empty data slots
function empty_Table(){
        document.write("<table border=\"1\" id=\"myTable\" >");
        var my_Structure = steps_Structure(steps);
        var vars = my_Structure[0].second.split(",");//This will create an array,str, of multiple variables
        //first row
        document.write("<TR>");
        for (var i = 0; i<vars.length+2; i+=2){
                document.write("<TH></TH>");
        }
        document.write("</TR>");
        //second row
        document.write("<TR>");
        for (var i = 0; i<vars.length+2; i+=2){
                document.write("<TD></TD>");
        }
        document.write("</TR>");
        //third row
        document.write("<TR>");
        for (var i = 0; i<vars.length+2; i+=2){
                document.write("<TD></TD>");
        }
        document.write("</TR>");
        document.write("</Table>");
        return;
}

以及修改该表的函数，

//This function is to begin drawing the variable display table
//This function should create a dynamic table that grows depending on the values in steps
function draw_Table(){
        var my_Structure = steps_Structure(steps);
        empty_Table();
        var myTable = document.getElementById('myTable');
        //draw first row
        var vars = my_Structure[0].second.split(",");//This will create an array, of multiple variables

        myTable.rows[0].cells[0].innerHTML = 'Variables:';
        //for (var i = 0; i<vars.length; i+=2){
                //document.write("<TH>",vars[i],"</TH>");
        //}

        //draw second row
        var pairs = my_Structure[step_Cur].second.split(",");                                                                                  
        myTable.rows[1].cells[0].innerHTML = 'Current Value:';
        //for (var i = 1; i<(pairs.length); i+=2){
                //document.write("<TD>",pairs[i],"</TD>");
        //}
        //third row                                                                                                    
        myTable.rows[2].cells[0].innerHTML = 'Last Value:';
}

3 行给我带来了麻烦

myTable.rows[1].cells[0].innerHTML = 'Variables:';
myTable.rows[2].cells[0].innerHTML = 'Current Value:';
myTable.rows[3].cells[0].innerHTML = 'Last Value:';

在 chrome 中，我看到错误“Uncaught TypeError: Cannot set property 'innerHTML' of undefined”，但不知道如何修复它。

我不是 javascript 用户——我刚刚被分配编写一个工具来显示求解函数的步骤——在这方面，我对 javascript 知识知之甚少，并且正在努力处理这个表

它应该如何工作：给定变量列表及其值 制作一个包含 3 行的表格，列数对应于传递的变量数量。

   Variables:|   a  |   b  |  c
 Current Val:| val1 | val2 | val3
previous val:| val1 | val2 | val3

previous val 显示函数上一步的值，current val 显示函数每个变量的当前值，variables 给出变量。

变量和标题在创建表格时是不变的，每次按下“下一步”/“返回”按钮以显示下一步/上一步时，表格中的值都会发生变化。

感谢您提供的任何帮助！

编辑：在这个伟大的社区的帮助下找到了错误——未定义错误的“单元格”是由一个非一个下标引起的，原始错误是由我的表创建错误引起的。我在实际添加数据之前关闭了<TR>。

Answer 1

我看到的一件事是您没有正确构建表格：

        //first row
        document.write("<TR id=></TR>");
        for (var i = 0; i<vars.length+2; i+=2){
                document.write("<TH></TH>");
        }

在这里创建一行，然后创建一个单元格。然后，当您获取表格行时，它实际上是空的。

你需要的是这样的：

document.write("<TR>");
for (var i = 0; i<vars.length+2; i+=2){
     document.write("<TH></TH>");
}
document.write("</TR>");

这样表格行就会有单元格。

如果这对你有帮助，请告诉我。