在页面上根据数据，动态创建表格

最新推荐文章于 2023-02-06 19:13:34 发布

leoNo_1

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量807

点赞数

分类专栏：写写文章标签： javascript

本文链接：https://blog.csdn.net/leoNo_1/article/details/107393461

版权

写写专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在页面上根据数据，动态创建表格

var arr = [
{
name: ‘Jack’,
age: 18,
gender: ‘男’
},{
name: ‘Rose’,
age: 20,
gender: ‘女’
},{
name: ‘Top’,
age: 22,
gender: ‘男’
}
]
创建一个表格，展示上面数组中的信息

<style>
        *{
            margin: 0;
            padding: 0;
        }
        table,td{
            border: 1px solid #000;
            border-spacing: 0;
            border-collapse:collapse;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <script>
        var arr = [
     {
       name: 'Jack',
       age: 18,
       gender: '男'
     },{
       name: 'Rose',
       age: 20,
       gender: '女'
     },{
       name: 'Top',
       age: 22,
       gender: '男'
     }
   ]
   function fn(){
        document.write("<table>");
        for(var i=0;i<arr.length;i++){
            document.write("<tr>");
            for(var key in arr[i]){
            document.write("<td>");
            document.write(arr[i][key]);
            document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
   }
   fn();
    </script>

leoNo_1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在页面上根据数据，动态创建表格

在页面上根据数据，动态创建表格var arr = [{name: ‘Jack’,age: 18,gender: ‘男’},{name: ‘Rose’,age: 20,gender: ‘女’},{name: ‘Top’,age: 22,gender: ‘男’}]创建一个表格，展示上面数组中的信息<style> *{ margin: 0; padding: 0; } ta
复制链接

扫一扫