Javascript,Uncaught TypeError:无法读取undefined的属性"cells"

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:无法设置属性'innerHTML'未定义"但不知道如何修复它.

我不是一个javascript用户 - 我刚刚给了一个编写工具来显示解决一个函数的步骤 - 对此,我有很少的javascript知识,我正在努力与这个表

它应该如何工作:给定变量列表及其值,制作一个3行的表,列数对应于传递的变量数量.

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

如果前一个val显示函数上一步的值,则当前值显示函数的每个变量的当前值,变量给出变量.

创建表时变量和标题是常量,每次按下"下一个"/"后退"按钮以显示下一个/上一个步骤时,表中的值将发生变化.

感谢您提供任何帮助!

编辑:在这个伟大的社区的帮助下找到了错误 - 未定义错误的"单元格"是由一个一个一个下标引起的,原始错误是由于创建我的表错误引起的.我<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>");

这样表行就会有单元格.

如果这有助于您,请告诉我.