为表格添加数据

最新推荐文章于 2023-08-07 16:42:27 发布

EyEyEyEy

最新推荐文章于 2023-08-07 16:42:27 发布

阅读量465

点赞数

分类专栏：学习Java 文章标签： html

本文链接：https://blog.csdn.net/EyEyEyEy/article/details/51762889

版权

学习Java 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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:"手机"}];