JavaScript(JS)网页--动态生成表格

雨点打透心脏的1/2处 2022-12-23 06:47 258阅读 0赞

# JavaScript(JS)网页–动态生成表格 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动态生成表格</title>
        <style>
            table {
         
                border-collapse: collapse;
                margin-top: 200px;
                margin-left: 500px;
            }
            table th{
         
                border: 1px solid black;
                width: 80px;
                height: 40px;
                text-align: center;
                background-color: cornsilk;
            }
    
            table td{
         
               
                border: 1px solid black;
                width: 80px;
                height: 40px;
                text-align: center;
    
            }
    
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
             </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
        <script>
    
            //加入数据
            var datas = [
                {
         
                    name:'张三',
                    subject:'JavaScript',
                    score:'100'
                },
                {
         
                    name:'李四',
                    subject:'JavaScript',
                    score:'95'
                },
                {
         
                    name:'王五',
                    subject:'JavaScript',
                    score:'98'
                },
                {
         
                    name:'赵六',
                    subject:'JavaScript',
                    score:'92'
                }
            ];
            //创建行，有几个人就创建几行
            var tbody =document.querySelector('tbody')
            for(var i = 0 ; i < datas.length ; i++){
         
                //创建行
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                //创建单元格
                for (var k in datas[i] ){
         
                    var td = document.createElement("td");
                    td.innerText = datas[i][k];
                    tr.appendChild(td);
                }
                //创建删除单元格
                var td = document.createElement('td');
                td.innerHTML = '<a href="JavaScript:;">删除</a>';
                tr.appendChild(td);
            }
            var as = document.querySelectorAll('a');
            for (var i = 0 ; i <as.length ; i++){
         
                as[i].onclick = function(){
         
                    //点击a 删除当前行
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
    
            // for (var k in Obj){
         
            //      k 得到的是属性名
            //      dbj[k] 得到的是属性值
            // }
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bdb4bea4b3bb4873ae4823a9c42769a5.png