使用Javascript制作表格

时间:2013-09-21 20:05:19

标签: javascript html arrays html-table

我遇到了这个问题,我的Javascript没有显示表格。假设用户输入window.prompt中的10个数字后,数字将被放入数组并显示在表格中。

以下是代码:

<html>
<head>
<meta charset = "utf-8">
<script type = "text/javascript">

var number = -99;
var array1 = new Array(10);

number = window.prompt("Enter 1 to continue \n Enter -99 to exit");
if(number == -99 || number == ""){
    exit();
}else
    array1 = window.prompt("Please enter 10 numbers to be stored into an array");

    function outputArray(heading, theArray, output){
    var content = "<h2>" + heading + "</h2><table><thead><th>Index</th><th>Value</th></thead><tbody>";
    var length = theArray.length;
    for(var i=0; i<length;++i){
    content += "<tr><td>" + i + "</td><td>" + theArray[i] + "</td></tr>";
    }
    content += "</tbody></table>";
    output.innerHTML = content;
    }

    outputArray("Your Array is:", array1, document.getElementById("output"));
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您应该将脚本包装在onload处理程序中:

var onLoadHandler = function() {
    var number = -99;
    var array1 = new Array(10);

    number = window.prompt("Enter 1 to continue \n Enter -99 to exit");
    if(number == -99 || number == ""){
        exit();
    }else
        array1 = window.prompt("Please enter 10 numbers to be stored into an array");

        function outputArray(heading, theArray, output){
            var content = "<h2>" + heading + "</h2><table><thead><th>Index</th><th>Value</th></thead><tbody>";
            var length = theArray.length;
            for(var i=0; i<length;++i){
            content += "<tr><td>" + i + "</td><td>" + theArray[i] + "</td></tr>";
            }
            content += "</tbody></table>";
            output.innerHTML = content;
        }

        outputArray("Your Array is:", array1, document.getElementById("output"));
}
if (window.addEventListener) {
    window.addEventListener('load', onLoadHandler, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', onLoadHandler );
}

即。你试图操纵一个可能仍然不存在的DOM元素。