JS基础-动态创建表格

需要达到的效果：

思路：表格中的数据存储在一个数组中，每一个数组元素是一个对象，然后通过遍历数组中的对象来创建行，一个对象就是一行，然后遍历里面的对象元素，对象里面的值就是单元格里面存的值。

完整代码：

<!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>动态表格</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>申申</td>
                <td>javascript</td>
                <td>100</td>
                <td>
                    <a href="#">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        // 表格元素内容
        var datas = [{
            name: 'oliver',
            subject: 'python',
            score: 89
        }, {
            name: 'violet',
            subject: 'C++',
            score: 90
        }, {
            name: 'iu',
            subject: 'C#',
            score: 92
        }];
        // 动态创建表格
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var trs = document.createElement('tr');
            tbody.appendChild(trs);
            // 遍历对象
            for (var k in datas[i]) {
                console.log(datas[i][k]);
                var ths = document.createElement('td');
                ths.innerHTML = datas[i][k];
                trs.appendChild(ths);
            }
            var thss = document.createElement('td');
            thss.innerHTML = "<a href='#'>删除</a>";
            trs.appendChild(thss);
        }
        // 删除单元格
        // 获取所有的a链接
        var ass = document.querySelectorAll('a');
        // 删除整个行
        for (var i = 0; i < ass.length; i++) {
            ass[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>

</html>

JS基础-动态创建表格

猜你喜欢