您的位置:首页 > 其它

为表格添加数据

2016-06-26 15:25 369 查看
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="producte.js"> </script>
</head>
<body>
<table border="1" width="300">
<caption>商品信息</caption>
<thead>
<tr>
<th>商品名</th>
<th>单价</th>
<th>厂家</th>
<th>品牌属性</th>
</tr>
</thead>
<tbody id="myTable"></tbody>
</table>
</body>
</html>

JavaScript代码:
/**
* Created with JetBrains WebStorm.
* User: liu
* Date: 16-6-21
* Time: 下午1:19
* To change this template use File | Settings | File Templates.
*/

window.onload = function(){
var str ="";
var myTableMsg = document.getElementById("myTable");
for(var i = 0; i < producte.length; i++){
var obj = producte[i];

str +="<tr>" +
"<td>"+obj.productName+"</td>" +
"<td>"+obj.price+"</td>" +
"<td>"+obj.make+"</td>" +
"<td>"+obj.shuxing+"</td>" +
"</tr>"
myTableMsg.innerHTML = str;

}
}
var producte = [{"productName":"opple",price:2500,make:"opple公司",shuxing:"手机"},
{"productName":"Mi",price:2500,make:"小米公司",shuxing:"手机"},
{"productName":"三星",price:2500,make:"三星公司",shuxing:"手机"},
{"productName":"华为",price:2500,make:"华为公司",shuxing:"手机"},
{"productName":"apple",price:2500,make:"苹果公司",shuxing:"手机"}];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: