Javascript，Uncaught TypeError：无法读取未定义的属性“单元格”

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:'; 

在铬，我看到错误“未捕获TypeError：无法设置属性'innerHTML'未定义”，但不知道如何f ix它。

我不是一个JavaScript用户 - 我刚刚被赋予一个任务来编写一个工具来显示解决某个功能的步骤 - 对此，我的javascript知识很少，并且正在认真地努力处理这个表格

它应该如何工作：给定变量列表及其值 构成一个3行的表格，列数与变量传递量相对应。

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

在以前VAL显示函数的前一步骤的值，当前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>"); 

这样的表行会的细胞。

让我知道这是否对你有帮助。