創建兩個動態表的函數以某種方式鏈接並混合起來

Question

我有一個函數可以創建兩個表。我已經使這兩種不同之間的每個變量都做出問題是當一個表在其數組中包含一個額外的數據插槽時，第二個表需要它。第二個表格在每行中需要相同的長度。

這裏是什麼樣子的圖片：

只要我添加的東西到第一臺，第二需要它，你可以在第二個表中看到，它說「未定義」。

下面是創建在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); 

    } 

在這個函數中，我創建唯一變量爲每個表。對於第二張表，我簡單地在每個變量的開頭添加了一個「M」。即使是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!")); 
}