Question

我正在尝试使用JavaScript动态填充HTML表格。出于某种原因，它只是不起作用。我期待区域中的代码没有包含在函数中，以便在加载页面时自动运行，正如我在别处读到的那样。

当我加载页面时，我只得到一个空白的白页，没有表格（不奇怪，因为它没有可见的边框），并且没有数据从数组中填充...

<html>
    <script>
        var target = document.getElementById('dynPop');
        var i
        var j
        for (var i = 0; i < matrix.length; i++) 
        {  
            for (var j = 0; j < matrix.length; j++) 
            {  
                var tblr = document.createElement('tr');
                var tbld1 = document.createElement('td');
                var tbld2 = document.createElement('td');
                var tbld3 = document.createElement('td');
                var text1 = document.createTextNode(matrix[i][j])
                var text2 = document.createTextNode(matrix[i][j])
                var text3 = document.createTextNode(matrix[i][j])
                tbld1.appendChild(text1);
                tbld2.appendChild(text2);
                tbld3.appendChild(text3);
                tblr.appendChild(tbld1);
                tblr.appendChild(tbld2);
                tblr.appendChild(tbld3); 
                target.parentNode.insertBefore(tblr, target);
            }   
        }
    </script>
    <body>
        <form>
            <table>
                <tr id="dynPop">
                </tr> 
            </table>
        </form>
    </body>
</html>

Answer 1

您的HTML无效。 <script>代码必须位于<head>或<body>中，而不是<html>元素的直接子代。在您的情况下，请尝试将<script>放在</body>标记之前。

Answer 2

一旦做出建议的更正，它就“有效”，并且matrix变量定义中的语法错误是固定的（缺少=插入） - 但它可能仍然不是你的想要，因为您要为数组中的每个值创建三个具有相同文本内容的td元素。

你真正想要的，可能更像是这样：

var matrix = [
    ["rose", 1.20, 3],
    ["tulip", 1.40, 4],
    ["orchid", 1.50, 5]
];
var target = document.getElementById('dynPop');
for (var i = 0; i < matrix.length; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < matrix[i].length; j++) {
        var td = document.createElement('td');
        var text = document.createTextNode(matrix[i][j])
        td.appendChild(text);
        tr.appendChild(td);
    }
    target.parentNode.insertBefore(tr, target);
}

http://jsfiddle.net/qLLW6/1/

由Javascript动态填充的HTML表格无法正常工作

2 个答案: