页面上有一个按钮和一个表格，点击按钮，表格显示数据

淡漠爱清凉

于 2022-11-05 20:15:00 发布

阅读量757

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Mr_115/article/details/127704568

版权

页面上有一个按钮和一个表格，点击按钮，表格显示数据

<body>
    <div>
        <button onclick="show()">显示数据</button>
        <table border="2px" id="tab">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>地址</th>
            </tr>
        </table>
    </div>

    <script>
   
        var arr = [
            {
                name: '小明',
                sex: '男',
                age: 23,
                address: '大连'
            },
            {
                name: '表姐',
                sex: '女',
                age: 22,
                address: '广西'
            },
            {
                name: '二狗',
                sex: '男',
                age: 20,
                address: '大连'
            }
        ];
        var table = document.querySelector('tab');
        function show() {
            for (let i = 0; i < arr.length; i++) {
                var tr = document.createElement('tr');
                tab.appendChild(tr);
                for (let j in arr[i]) {  // 里面的for循环管列 td
                    var td = document.createElement('td')
                    td.innerHTML = arr[i][j];   // 把对象里面的属性值 arr[i][j] 给 td
                    tr.appendChild(td);
                }
            }
        }
    </script>

</body>

效果图

点击按钮前