原生JS，实现数组对象内容渲染成表格

最新推荐文章于 2023-06-23 23:01:32 发布

卡洛背心

最新推荐文章于 2023-06-23 23:01:32 发布

阅读量3k

点赞数 3

分类专栏：数据处理文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42321819/article/details/108243927

版权

数据处理专栏收录该内容

25 篇文章 4 订阅

订阅专栏

在这里插入图片描述
将数组里面的内容填充到表格之中，并将属性设置为表头

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

  <style type="text/css">
	  .text-center{
		  border: 1px solid #000;
	  }
  	
  </style>
    <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"];
        //初始化
        function init() {

            var body = document.body;

            var container = document.createElement("div");

            body.appendChild(container);

			return container;
 
        }
 
        //创建表格
        function inittable(container) {
            var table = document.createElement("table");

            container.appendChild(table);
    
            var tr_head = document.createElement("tr");
       
            table.appendChild(tr_head);

            for (var i = 0; i < tablehead.length; i++) {
         
                var th = document.createElement("th");
      
                th.setAttribute("class", "text-center");
             
                th.innerHTML = tablehead[i];
              
                tr_head.appendChild(th);
            }
            //使用for循环将对象加入到table中去
            for (var k = 0; k < arr.length; k++) {

                var tr = document.createElement("tr");

                table.appendChild(tr);

                for (var j = 0; j < tablehead.length; j++) {
  
                    var td = document.createElement("td");
 
                    td.setAttribute("class", "text-center");
 
                    td.innerHTML = arr[k][tablehead[j]];
                    tr.appendChild(td);
                }
                
            }
        }
        window.onload = function() {
           var table=init();
            inittable(table);
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

卡洛背心

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
原生JS，实现数组对象内容渲染成表格

将数组里面的内容填充到表格之中，并将属性设置为表头<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/.
复制链接

扫一扫