[英]Display JavaScript table on the load of a html web page
我試圖使用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> <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>
首先,我想在點擊按鈕時顯示表格。 其次,我想在加載html頁面后立即顯示表格。
我該怎么做?
對不起,如果這不是一個好問題,或者是否有很多遺漏。 我對這個很陌生,所以只是使用不同的教程並把東西放在一起......
你有一些問題:
在你的循環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> <a href="#">About</a> <a href="#">Help</a> <a href="#">Contact</a> </td> </tr> </table> </div> </div> <hr />
您需要考慮的第一件事是,在加載之前,您無法向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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.