Question

I’ve got a function that creates two tables. I’ve made every variable between the two different. The problem is that when one table includes an extra data slot in it’s array, the second table requires it. The 2nd table requires the same lengths in each row.

Here is a picture of what that looks like:

So long as I add something to the first table, the 2nd requires it as you can see in the 2nd table where it says “undefined”.

Here is the function that creates these tables in javascript:

    function fatlossTableResults(){

var Table= document.createElement("TABLE");
Table.setAttribute("class","table");
var TBody0 = document.createElement("TBODY");
var TBody1 = document.createElement("TBODY");
var Caption = document.createElement("CAPTION");
var Row, Cell;
var i, j;

var rowdata = new Array();

rowdata[0] = new Array("Total Daily Energy:", "2100");
rowdata[1] = new Array("Lean Body Mass:", "149", "pounds");
rowdata[2] = new Array("Ideal Weight:", "150", "pounds");
rowdata[3] = new Array("Calories Per Meal:", "700");
rowdata[4] = new Array("Calories Per Meal:", "1");
rowdata[5] = new Array("Daily Calorie Deficit:", "200");

Table.appendChild(TBody0);
Table.appendChild(TBody1);
Table.appendChild(Caption);
Table.setAttribute("border", 1);

for(i=0;i<rowdata.length; i++)
{
    var oBody = (i<2) ? TBody0 : TBody1;
    Row = document.createElement("TR");
    oBody.appendChild(Row);

    for(j=0;j<rowdata[i].length;j++)
    {
        Cell = document.createElement("TD");
        Cell.innerHTML = rowdata[i][j];
        Row.appendChild(Cell);
    }

}

Caption.innerHTML = "Your Results!";
Caption.align= "middle";
Caption.style.fontWeight="bold";

child.appendChild(Table);

//***************************** CREATE THE MACRO NUTRIENT TABLE
var MTable= document.createElement("TABLE");
MTable.setAttribute("class","table");
var MTBody0 = document.createElement("TBODY");
var MTBody1 = document.createElement("TBODY");
var MCaption = document.createElement("CAPTION");
var MRow, MCell;
var Mi, Mj;

var Mrowdata = new Array();

Mrowdata[0] = new Array("Protien:", "700");
Mrowdata[1] = new Array("Carbs:", "1" );
Mrowdata[2] = new Array("Fat:", "200" );

MTable.appendChild(MTBody0);
MTable.appendChild(MTBody1);
MTable.appendChild(MCaption);
MTable.setAttribute("border", 1);

for(Mi=0;Mi<Mrowdata.length; Mi++)
{
    var oMBody = (Mi<2) ? MTBody0 : MTBody1;
    MRow = document.createElement("TR");
    oMBody.appendChild(MRow);

    for(Mj=0;Mj<rowdata[Mi].length;Mj++)
    {
        MCell = document.createElement("TD");
        MCell.innerHTML = Mrowdata[Mi][Mj];
        MRow.appendChild(MCell);
    }
}

MCaption.innerHTML = "MACROS!";
MCaption.align= "middle";
MCaption.style.fontWeight="bold";


child.appendChild(Table);
child.appendChild(MTable);

  }

In this function I created unique variables for each table. For the second table I simply added an “M” to the beginning to every variable. Even the i and j increment variables.

I took this code from this site and modified to to suit my needs:

http://msdn.microsoft.com/en-us/library/ms532998(v=vs.85).aspx

The DOM explanation portion at the bottom is what I used.

Thanks for the help!

Answer 1

Change

for(Mj=0;Mj<rowdata[Mi].length;Mj++)

to

for(Mj=0;Mj<Mrowdata[Mi].length;Mj++)

Or better: As both parts are identical, apart from the content, you should factor out the code that generates the table so that you just have to feet it an array from which the table is generated.

Example:

function generateTable(data, capt) {
    var table = document.createElement("TABLE"),
        tBody0 = document.createElement("TBODY"),
        tBody1 = document.createElement("TBODY"),
        caption = document.createElement("CAPTION");
        row, cell, body, i, j;

    table.setAttribute("class","table");
    table.setAttribute("border", 1);

    table.appendChild(tBody0);
    table.appendChild(tBody1);
    table.appendChild(caption);

    for(i = 0; i < data.length; i++) {
        body = (i<2) ? tBody0 : tBody1;
        row = document.createElement("TR");
        body.appendChild(row);

        for(j = 0; j < data[i].length; j++) {
            cell = document.createElement("TD");
            cell.innerHTML = data[i][j];
            row.appendChild(Cell);
        }
    }

    caption.innerHTML = capt;
    caption.align= "middle";
    caption.style.fontWeight="bold";

    return table;
}

function fatlossTableResults() {
    child.appendChild(generateTable([
        ["Total Daily Energy:", "2100"],
        ["Lean Body Mass:", "149", "pounds"],
        ["Ideal Weight:", "150", "pounds"],
        ["Calories Per Meal:", "700"],
        ["Calories Per Meal:", "1"],
        ["Daily Calorie Deficit:", "200"]
    ], "Your Results!"));

    child.appendChild(generateTable([
        ["Protien:", "700"],
        ["Carbs:", "1"],
        ["Fat:", "200"]
    ], "Macros!"));
}