【js】动态表格练习

最新推荐文章于 2022-11-17 23:32:19 发布

sailven

最新推荐文章于 2022-11-17 23:32:19 发布

阅读量55

点赞数

分类专栏： js学习文章标签： HTML CSS JavaScript 动态表格删除功能

本文链接：https://blog.csdn.net/sailven/article/details/127790456

版权

js学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态生成表格，且可以删除（刷新后复位）。

在这里插入图片描述

<!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>Document</title>
    <style>
        table{
            margin:0 auto;
        }
        td,th{
            background-color: gray;
            color: white;
            width: 100px;
            height: 30px;
        }

        
    </style>
</head>
<body>
   <table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>学科</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
   </table>
    

    <script>
       var datas =[
       {
            name: 'zyf',
            subject: 'computer',
            score: 99
       },
       {
            name: 'my',
            subject: 'art',
            score: 100
       },
       {
            name: 't',
            subject: 'sports',
            score: 70
       }]; 

       var tbody = document.querySelector('tbody');
       for(var i=0;i<datas.length;i++){
            var tr = document.createElement('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);
            tbody.appendChild(tr);
       }
       
       var as =document.querySelectorAll('a');
       for(var i =0;i<as.length;i++){
         as[i].onclick = function(){
            tbody.removeChild(this.parentNode.parentNode)

         }
       }
       
    </script>

    
</body>
</html>