Функция создания двух динамических таблиц как-то связана и перепутана

Question

У меня есть функция, которая создает две таблицы.Я сделал каждую переменную между двумя разными.Проблема состоит в том, что когда одна таблица содержит дополнительный слот данных в своем массиве, вторая таблица требует этого.2-я таблица требует одинаковую длину в каждом ряду.

Вот изображение того, на что это похоже:

До тех пор, пока я добавляю что-то в первую таблицу, 2-й требует этого, как вы можете видетьво 2-й таблице, где написано «undefined».

Вот функция, которая создает эти таблицы в 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);

  }

В этой функции я создал уникальные переменные для каждой таблицы.Для второй таблицы я просто добавил «М» в начало каждой переменной.Даже i и j увеличивают переменные.

Я взял этот код с этого сайта и изменил его в соответствии со своими потребностями:

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

Часть объяснения DOM внизу - это то, что я использовал.

Спасибо за помощь!

Answer 1

Изменить

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

на

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

Или лучше: поскольку обе части идентичны, кроме содержимого, вы должны выделить код, который генерирует таблицу, чтобы вы моглипросто нужно создать массив, из которого сгенерирована таблица.

Пример:

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!"));
}