在加载html网页时显示JavaScript表

Display JavaScript table on the load of a html web page

本文关键字：显示 JavaScript 网页 加载 html      更新时间：2024-06-14

我正试图使用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页面后立即显示该表。

我该怎么做？

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

您有几个问题：

  • 在您的循环中，for (var i = 0; i < ORDER.length; i++) {应该是for (var i = 0; i < ORDER.orders.length; i++) {

  • refArray、growerArray、itemArray为未定义

  • 您没有将td附加到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 />

您需要考虑的第一件事是，在加载DOM之前，您不能向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);
相关文章：