我正在尝试使用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 />
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句