使用Javascript创建html表不起作用

基本上，我希望用户只需将“height”变量更改为所需的行数，然后存储行中每个td应包含的单词，然后代码应生成表

我的html就是这样：

    <table id="newTable">
    </table>

这是我的Javascript：

<script type="text/javascript">
var height = 2; // user in this case would want 3 rows (height + 1)
var rowNumber = 0;

var height0 = ['HeadingOne', 'HeadingTwo']; // the words in each td in the first row
var height1 = ['firstTd of row', 'secondTd of row']; // the words in each td in the second row
var height2 = ['firstTd of other row', 'secondTd of other row']; // the words in each td in the third row

$(document).ready( function() {
    createTr();
});

function createTr () {
    for (var h=0; h<height + 1; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = "<tr id='rowNumber" + rowNumber + "'>"; // <tr id='rowNumber0'>
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
        for (var i=0; i<window['height' + rowNumber].length; i++) {
            if (i == window['height' + rowNumber].length-1) { // if i==2, then that means it is the last td in the tr, so have a </tr> at the end of it
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td></tr>";
                $('#rowNumber' + rowNumber).append(theTr); // append to the end of the Tr

            } else {
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td>";
                $('#rowNumber' + rowNumber).append(theTr);
            }
        }
        rowNumber += 1;
    }
}
</script>

变量高度=2；//在这种情况下，用户需要3行（高度+1）
var rowNumber=0；
变量高度0=['HeadingOne'，'HeadingTwo']；//第一行每个td中的单词
var height1=[“行的第一个TD”，“行的第二个TD”]；//第二行每个td中的单词
var height2=[“其他行的第一个TD”，“其他行的第二个TD”]；//第三行每个td中的单词
$（文档）.ready（函数（）{
createTr（）；
});
函数createTr（）{
对于（var h=0；h您应该更改该行

$('#rowNumber' + rowNumber).append(theTr);

进入

您正在内部循环中再次添加Tr代码，但实际上您想要添加Td代码。
您应该更改行

$('#rowNumber' + rowNumber).append(theTr);

进入

您正在内部循环中再次添加Tr代码，但实际上您想要添加Td代码。
您应该更改行

$('#rowNumber' + rowNumber).append(theTr);

进入

您正在内部循环中再次添加Tr代码，但实际上您想要添加Td代码。
您应该更改行

$('#rowNumber' + rowNumber).append(theTr);

进入

您再次在内部循环中添加Tr代码，但实际上您想添加Td代码。
所有的窗口[“height”+rowNumber]方法都很糟糕。使用数组，并将其作为参数传递给函数，这样您就不会使用全局变量。使用jQuery DOM创建函数而不是附加字符串

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>


var heights=[['HeadingOne'，'HeadingTwo']，//第一行每个td中的单词
['firstTd of row'，'secondTd of row']，//第二行每个td中的单词
['firstTd of other row'，'secondTd of other row']//第三行每个td中的单词
];
$（文档）.ready（函数（）{
createTr（高度）；
});
函数createTr（高度）{
对于（var h=0；h所有
window[“height”+rownumer]
的东西都是一种糟糕的方法。使用数组，并将其作为参数传递给函数，这样就不用全局变量。使用jQuery DOM创建函数，而不用附加字符串

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>


var heights=[['HeadingOne'，'HeadingTwo']，//第一行每个td中的单词
['firstTd of row'，'secondTd of row']，//第二行每个td中的单词
['firstTd of other row'，'secondTd of other row']//第三行每个td中的单词
];
$（文档）.ready（函数（）{
createTr（高度）；
});
函数createTr（高度）{
对于（var h=0；h所有
window[“height”+rownumer]
的东西都是一种糟糕的方法。使用数组，并将其作为参数传递给函数，这样就不用全局变量。使用jQuery DOM创建函数，而不用附加字符串

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>


var heights=[['HeadingOne'，'HeadingTwo']，//第一行每个td中的单词
['firstTd of row'，'secondTd of row']，//第二行每个td中的单词
['firstTd of other row'，'secondTd of other row']//第三行每个td中的单词
];
$（文档）.ready（函数（）{
createTr（高度）；
});
函数createTr（高度）{
对于（var h=0；h所有
window[“height”+rownumer]
的东西都是一种糟糕的方法。使用数组，并将其作为参数传递给函数，这样就不用全局变量。使用jQuery DOM创建函数，而不用附加字符串

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>


var heights=[['HeadingOne'，'HeadingTwo']，//第一行每个td中的单词
['firstTd of row'，'secondTd of row']，//第二行每个td中的单词
['firstTd of other row'，'secondTd of other row']//第三行每个td中的单词
];
$（文档）.ready（函数（）{
createTr（高度）；
});
函数createTr（高度）{
对于（var h=0；hThis is a mass，这不是创建DOM的方式。请使用适当的方法，如
document.createElement（'table'））
为什么像
height0
和
height1
这样的变量不使用数组？你不应该附加
。DOM操作函数操作整个DOM元素，而不是字符串。@danfrom，我在学习Javascript时甚至没有读过document.createElement。你能推荐一些好的教程吗（不需要是视频）我可以在哪里了解它并学习如何使用它创建表？99%的情况下，当您发现自己将数字放在变量名称的末尾时，您应该将它们放入数组中。这是一个混乱，这不是您创建DOM的方式。请使用适当的方法，如
document.createElement（'table'）
为什么像
height0
和
height1
这样的变量不使用数组？你不应该附加
。DOM操作函数操作整个DOM元素，而不是字符串。@danfrom，我在学习Javascript时甚至没有读过document.createElement。你能推荐一些好的教程吗（不需要是视频）我可以在哪里了解它并学习如何使用它创建表？99%的情况下，当您发现自己将数字放在变量名称的末尾时，您应该将它们放入数组中。这是一个混乱，这不是您创建DOM的方式。请使用适当的方法，如
document.createElement（'table'）
为什么像
height0
和
height1
这样的变量不使用数组？你不应该附加
。DOM操作函数操作整个DOM元素，而不是字符串。@danfrom，我在学习Javascript时甚至没有读过document.createElement。你能推荐一些好的教程吗（不需要是视频）我可以在哪里了解它并学习如何使用它创建表格？99%的时间