在html网页的加载上显示JavaScript表
[英]Display JavaScript table on the load of a html web page
问题描述
I am trying to display a populated table on a html page using javascript. 
我试图使用javascript在html页面上显示填充的表格。
This is what I have so far: 这是我到目前为止：
table.js - contains my function and data for the table 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 page 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> <a href="#"><a href="#">About</a> <a href="#"><a href="#">Help</a> <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>
Firstly, I wanted to display the table on the click of a button. 首先，我想在点击按钮时显示表格。 Secondly, I want to display the table as soon as the html page is loaded. 其次，我想在加载html页面后立即显示表格。
How would I go about this? 我该怎么做？
Sorry if its not a good question, or if there is lots missing. 对不起，如果这不是一个好问题，或者是否有很多遗漏。 I'm quite new to this so sort of just using different tutorials and putting stuff together ... 我对这个很陌生，所以只是使用不同的教程并把东西放在一起......
2 个解决方案
解决方案1
2 已采纳 2015-02-27 13:02:57
You have a few problems: 你有一些问题：
In your loop
for (var i = 0; i < ORDER.length; i++) {should befor (var i = 0; i < ORDER.orders.length; i++) {在你的循环for (var i = 0; i < ORDER.length; i++) {应该是for (var i = 0; i < ORDER.orders.length; i++) {refArray,growerArray,itemArrayare undefinedrefArray，growerArray，itemArray未定义- You are not appending the
tds to thetr你没有将tds附加到tr
Be sure to look at https://developer.chrome.com/devtools/docs/javascript-debugging and to check your console for errors. 请务必查看https://developer.chrome.com/devtools/docs/javascript-debugging并检查控制台是否有错误。
The following example adds the table after the page is loaded, and also when you click the button. 以下示例在加载页面后以及单击按钮时添加表格。
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> <a href="#">About</a> <a href="#">Help</a> <a href="#">Contact</a> </td> </tr> </table> </div> </div> <hr />
解决方案2
1 2015-02-27 12:51:44
The first thing you need to consider, is that you can't add elements to the DOM until it has loaded. 您需要考虑的第一件事是，在加载之前，您无法向DOM添加元素。
Your addTable function builds the table and appends it to the <body> element. 您的addTable函数构建表并将其附加到<body>元素。 This needs to be called when the page is ready and the DOM has been loaded. 当页面准备好并且已加载DOM时，需要调用它。
window.addEventListener('load', addTable);
However, I reckon that you probably don't want it to be attached to the bottom of the <body> ? 但是，我认为你可能不希望它被附加到<body>的底部？ I'm guessing it should go inside <div id="mytable"></div> ? 我猜它应该进去<div id="mytable"></div> ？
The following adjustments would allow for that behaviour. 以下调整将允许该行为。
var table = document.createElement("TABLE"),
container = document.getElementById('mytable');
table.setAttribute("id", "myTable");
container.appendChild(table);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.