jQuery数组渲染表格

最新推荐文章于 2023-05-25 21:09:08 发布

正一品程序员

最新推荐文章于 2023-05-25 21:09:08 发布

阅读量2.7k

点赞数 1

文章标签： jquery html html5

本文链接：https://blog.csdn.net/weixin_46060121/article/details/120439039

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery数组渲染表格</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        .text-center {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="table"></table>
    <script>
        var arr = [
            {id: '1001',name: '苹果',price: 2000},
            {id: '1002',name: '小米',price: 2100},
            {id: '1003',name: '华为',price: 2200}, 
            {id: '1004',name: '锤子',price: 2300}, 
            {id: '1005',name: '三星',price: 2400}
        ];
        //表头
        var tablehead = ["id", "name", "price"];
        //创建表格
        // var table=document.getElementById("table")
        // var tr_head = document.createElement("tr");
        var tr_head = $("<tr></tr>")
        // table.appendChild(tr_head);
        $("#table").append(tr_head)



        //填装表头
        for (var i = 0; i < tablehead.length; i++) {
            // var th = document.createElement("th");
            var th = $("<th></th>")
            // th.setAttribute("class", "text-center");
            th.attr("class", "text-center");
            // th.innerHTML = tablehead[i];
            th.html(tablehead[i])
            // tr_head.appendChild(th);
            tr_head.append(th);
        }

        //使用for循环将对象加入到table中去
        for (var k = 0; k < arr.length; k++) {
            // var tr = document.createElement("tr");
            var tr = $("<tr></tr>")
            // table.appendChild(tr);
            $("#table").append(tr);
            for (var j = 0; j < tablehead.length; j++) {
                // var td = document.createElement("td");
                var td = $("<td></td>")
                // td.setAttribute("class", "text-center");
                td.attr("class", "text-center");
                // td.innerHTML = arr[k][tablehead[j]];
                td.html(arr[k][tablehead[j]])
                // tr.appendChild(td);
                tr.append(td);
            }
        }
    </script>
</body>
</html>

正一品程序员

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
jQuery数组渲染表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>17、
复制链接

扫一扫