在html网页的加载上显示JavaScript表

Question

我试图使用javascript在html页面上显示填充的表格。

这是我到目前为止：

table.js - 包含我的表的函数和数据

var ORDER = { orders: [] };

function Order(ref, grower, item) {
    this.order_reference = ("o" + ref);
    this.grower_reference = grower;
    this.item_ordered = item;
}

var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);

function addTable(){        
    var table = document.createElement("TABLE");
    table.setAttribute("id", "myTable");
    document.body.appendChild(table);

    for (var i=0; i<ORDER.length; i++) {    
        var row = document.createElement("TR");

        var refCell = document.createElement("TD");
        var growerCell = document.createElement("TD");
        var itemCell = document.createElement("TD");

        var ref = document.createTextNode(refArray[i]);
        var grower = document.createTextNode(growerArray[i]);
        var item = document.createTextNode(itemArray[i]);

        refCell.appendChild(ref);
        growerCell.appendChild(grower);
        itemCell.appendChild(item);

        table.appendChild(row);            
    }
}

HTML页面

<!DOCTYPE html>
    <html lang = "en">
         <head>
             <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
             <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
         </head>

         <body id="contracts">
             <div id="wrapper">
                 <div id="mytable">
                 </div>
             </div>
             <div id="footer">
                 <table id= "footer" style="width: 100%">
                     <tr>
                         <td valign="bottom">Company Name <br> Tel Num <br> Location, Postcode</td> 
                         <td> <button onclick="addTable()"> Click me </button></td> 
                         <td align="right" valign="bottom"><a href="#"><a href="#">Home</a> &nbsp; <a href="#"><a href="#">About</a> &nbsp; <a href="#"><a href="#">Help</a> &nbsp; <a href="#"><a href="#">Contact</a></td> 
                     </tr>    
                 </table>
             </div>
         </div> 

         <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
         <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>        
         <script type="text/javascript" src="table.js"></script>
    </body>   
</html>

首先，我想在点击按钮时显示表格。 其次，我想在加载html页面后立即显示表格。

我该怎么做？

对不起，如果这不是一个好问题，或者是否有很多遗漏。 我对这个很陌生，所以只是使用不同的教程并把东西放在一起......

Answer 1

你有一些问题：

在你的循环for (var i = 0; i < ORDER.length; i++) {应该是for (var i = 0; i < ORDER.orders.length; i++) {
refArray ， growerArray ， itemArray未定义
你没有将td s附加到tr

请务必查看https://developer.chrome.com/devtools/docs/javascript-debugging并检查控制台是否有错误。

以下示例在加载页面后以及单击按钮时添加表格。

 var ORDER = { orders: [] }; function Order(ref, grower, item) { this.order_reference = ("o" + ref); this.grower_reference = grower; this.item_ordered = item; } var order1 = new Order(1, "grower2", "item"); ORDER.orders.push(order1); function addTable(orders) { var table = document.createElement("TABLE"); table.setAttribute("id", "myTable"); document.body.appendChild(table); for (var i = 0; i < orders.length; i++) { var order = orders[i]; var row = document.createElement("TR"); var refCell = document.createElement("TD"); var growerCell = document.createElement("TD"); var itemCell = document.createElement("TD"); row.appendChild(refCell); row.appendChild(growerCell); row.appendChild(itemCell); var ref = document.createTextNode(order.order_reference); var grower = document.createTextNode(order.grower_reference); var item = document.createTextNode(order.item_ordered); refCell.appendChild(ref); growerCell.appendChild(grower); itemCell.appendChild(item); table.appendChild(row); document.body.appendChild(document.createElement('hr')); } } window.addEventListener('load', function() { addTable(ORDER.orders) });

 <div id="wrapper"> <div id="mytable"></div> <div id="footer"> <table id="footer" style="width: 100%"> <tr> <td valign="bottom">Company Name <br />Tel Num <br />Location, Postcode</td> <td> <button onclick="addTable(ORDER.orders)">Click me</button> </td> <td align="right" valign="bottom"> <a href="#">Home</a> &nbsp;<a href="#">About</a> &nbsp;<a href="#">Help</a> &nbsp;<a href="#">Contact</a> </td> </tr> </table> </div> </div> <hr />

Answer 2

您需要考虑的第一件事是，在加载之前，您无法向DOM添加元素。

您的addTable函数构建表并将其附加到<body>元素。 当页面准备好并且已加载DOM时，需要调用它。

window.addEventListener('load', addTable);

但是，我认为你可能不希望它被附加到<body>的底部？ 我猜它应该进去<div id="mytable"></div> ？

以下调整将允许该行为。

var table = document.createElement("TABLE"),
    container = document.getElementById('mytable');

table.setAttribute("id", "myTable");
container.appendChild(table);

在html网页的加载上显示JavaScript表

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-02-27 13:02:57

解决方案2
1 2015-02-27 12:51:44

在html网页的加载上显示JavaScript表

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-02-27 13:02:57

解决方案2 1 2015-02-27 12:51:44

解决方案1
2 已采纳 2015-02-27 13:02:57

解决方案2
1 2015-02-27 12:51:44