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

Question

I'm trying to work with a table in Javascript.

I have a function to create an empty 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;
}

and a function to modify that 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 lines are giving me trouble

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

In chrome, I'm seeing the error "Uncaught TypeError: Cannot set property 'innerHTML' of undefined" but have no idea how to fix it.

I am not a javascript user -- I was just given an assignment to write a tool for displaying the steps in solving a function -- to this regard, I have very little javascript knowledge and am seriously struggling with this table

How it ~should~ work: Given list of variables and their values make a table of 3 rows, number of columns corresponding to amount of variables passed.

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

where previous val shows the values of the previous step of the function, current val shows the current values of each of the variables of the function, and variables gives variables.

The variables and headers are constant upon table creation, the values in the table will change with each time a "next"/"back" button is pressed to display the next/previous step.

Thank you for any help you can provide!

EDIT: Found the bugs with the help of this great community -- The "cells" of undefined bug was caused by an off-by-one subscript, the original bug was caused by creating my table wrong. I closed <TR> before I actually added data to it.

Solution

One thing I see is that you don't construct your table correctly:

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

here you create a row and after that you create a cell. Then, when you get the table row, it is empty which is actually true.

What you need is something like this:

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

this way the table row will have the cells.

Let me know if this helps you.