动态生成表格

水深无声 2023-10-03 14:51 19阅读 0赞

## 动态生成表格 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <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 cellspacing="0">
    
            <thead>
    
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
    
            </thead>
    
    
            <tbody>
    
            </tbody>
        </table>
        <script>
            // 1.先去准备好学生的数据
            var datas = [{
          
                name: '魏璎珞',
                subject: 'JavaScript',
                score: 100
            }, {
          
                name: '弘历',
                subject: 'JavaScript',
                score: 98
            }, {
          
                name: '傅恒',
                subject: 'JavaScript',
                score: 99
            }, {
          
                name: '明玉',
                subject: 'JavaScript',
                score: 88
            }, {
          
                name: '盛浩',
                subject: 'JavaScript',
                score: 100
            }];
    
    
            // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
    
            var tbody = document.querySelector('tbody');  //获取元素
    
    
            for (var i = 0; i < datas.length; i++) {
           // 外面的for循环管行 tr
                // 1. 创建 tr行
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                // ul.appendChild(li);
                //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
    
    
                // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
    
                for (var k in datas[i]) {
           // 里面的for循环管列 td
    
                    // 创建单元格 
                    var td = document.createElement('td');
    
                    // 把对象里面的属性值 datas[i][k] 给 td  
                    // console.log(datas[i][k]);
    
                    td.innerHTML = datas[i][k];
    
                    tr.appendChild(td);
                    //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
    
                    //HTMLElementObject.innerHTML=text
                }
    
                // 3. 创建有删除2个字的单元格 
                var td = document.createElement('td');
    
                td.innerHTML = '<a href="javascript:;">删除 </a>';
    
                tr.appendChild(td);
    
            }
    
    
            // 4. 删除操作 开始 
            var as = document.querySelectorAll('a'); //获取元素
            for (var i = 0; i < as.length; i++) {
          
                as[i].onclick = function () {
          
    
                    // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                    tbody.removeChild(this.parentNode.parentNode)//tr td a -->this.parentNode.parentNode
                }
            }
    
    
            // for(var k in obj) {
          
            //     k 得到的是属性名
            //     obj[k] 得到是属性值
            // }
        </script>
    </body>
    
    </html>