Question

我有一个创建两个表的函数。我已经在两者之间做了每个变量。问题是当一个表在其数组中包含一个额外的数据槽时，第二个表需要它。第二个表在每行中需要相同的长度。

这是一张看起来像的照片：

enter image description here

只要我在第一个表中添加一些东西，第二个就需要它，正如你在第二个表中看到的那样“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);

  }

在这个函数中，我为每个表创建了唯一的变量。对于第二个表，我只是在每个变量的开头添加了一个“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!"));
}

创建两个动态表的函数以某种方式链接并混淆

1 个答案: