Javascript, Uncaught TypeError: Cannot read property "cells" of undefined

Question

我正在尝试使用 Javascript 中的 table。

我有一个函数可以创建一个空 table,

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

和修改 table,

的函数

//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知识，并且正在为此苦苦挣扎 table

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

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

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

变量和headers在table创建时是不变的，table中的值将随着每次"next"/"back"按钮而改变按下以显示 next/previous 步骤。

感谢您提供的任何帮助！

编辑：在这个伟大社区的帮助下找到了错误——未定义错误的 "cells" 是由 off-by-one 下标引起的，原始错误是由创建我的 table错了。我在实际添加数据之前就关闭了 <TR>。

Answer 1

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

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

在这里创建一行，然后创建一个单元格。然后，当你得到 table 行时，它是空的，这实际上是真的。

你需要的是这样的：

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

这样 table 行就会有单元格。

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

Javascript, Uncaught TypeError: Cannot read property "cells" of undefined

Javascript, Uncaught TypeError: Cannot read property "cells" of undefined

html

javascript

json

dynamic