动态创建表

卡卡西最近怎么样

已于 2022-03-08 16:35:48 修改

阅读量1k

点赞数 6

分类专栏： JavaScript 零基础入门文章标签： javascript 前端开发语言 html css

于 2022-02-26 17:23:13 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123152865

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 42 订阅

订阅专栏

利用节点操作也可以完成动态地创建表格，我们将数据放进对象中，再将对象放入数组，每步的操作为创建行，创建单元格，再创建删除格，单元格和删除格之所以没有一起创建是因为单元格的个数等于对象内属性的个数，可以直接遍历创建，而删除是单独的功能，用到的方法就是学习过的各种节点操作，内容可以直接添加在数组中即可完成创建（开发时数据在数据库中连接）

JS 部分代码：

 var tbody=document.querySelector('tbody');
       for(var i=0;i<dates.length;i++){   //创建行
          var trs=document.createElement('tr');
          tbody.appendChild(trs);
        for(var k in dates[i]){   //创建单元格
            var tds=document.createElement('td');
            tds.innerHTML=dates[i][k];
            trs.appendChild(tds);
        }
        var del =document.createElement('td');  //设置删除操作
        del.innerHTML="<button class='delbtn'>删 除</button>"
        trs.appendChild(del);
        var btn=document.querySelectorAll('.delbtn');
        for(var j=0;j<btn.length;j++){
            btn[j].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode);
            }
          }
       }

完整代码：

<!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{
              width: 700px;
              margin: 100px auto;
              border: 2px solid;
        }
        
        thead{
            height: 60px;
            font-size: 25px;
            font-weight: bold;
            background-color: rgb(124, 170, 255);
        }

        thead td:last-child{
                 background-color: rgb(255, 114, 114);
        }

        td{
            border: 2px solid;
            text-align: center;
            
        }

        tbody{
            font-size: 20px;
            font-weight: bold;
            background-color: rgb(234, 255, 139);
        }

        .delbtn{
            width: 50px;
            height: 30px;
            background-color: rgb(255, 247, 247);
            -webkit-border-radius:30px;
            -moz-border-radius:30px;
            color: rgb(0, 0, 0);
            font-weight: bold;
        }
        .delbtn:hover{
            background-color: rgb(131, 131, 131);
            color: rgb(255, 255, 255);
        }
    </style>
</head>
<body>
   <table cellspacing="0">
       <thead>
           <tr>
               <td>姓名</td>
               <td>科目</td>
               <td>成绩</td>
               <td>删除</td>
           </tr>
       </thead>
       <tbody>
       </tbody>
   </table>
   <script>
       var dates=[
           {
               name:'小明',
               sub:'JS',
               grade:'99'
           },
           {
               name:'小红',
               sub:'JS',
               grade:'56'
           },
           {
               name:'小张',
               sub:'JS',
               grade:'95'
           },
           {
               name:'小朱',
               sub:'JS',
               grade:'65'
           },
           {
               name:'张三',
               sub:'JS',
               grade:77,
           }
       ];
       var tbody=document.querySelector('tbody');
       for(var i=0;i<dates.length;i++){   //创建行
          var trs=document.createElement('tr');
          tbody.appendChild(trs);
        for(var k in dates[i]){   //创建单元格
            var tds=document.createElement('td');
            tds.innerHTML=dates[i][k];
            trs.appendChild(tds);
        }
        var del =document.createElement('td');  //设置删除操作
        del.innerHTML="<button class='delbtn'>删 除</button>"
        trs.appendChild(del);
        var btn=document.querySelectorAll('.delbtn');
        for(var j=0;j<btn.length;j++){
            btn[j].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode);
            }
          }
       }
   </script>
</body>
</html>

卡卡西最近怎么样

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
动态创建表

利用节点操作也可以完成动态地创建表格，我们将数据放进对象中，再将对象放入数组，每步的操作为创建行，创建单元格，再创建删除格，单元格和删除格之所以没有一起创建是因为单元格的个数等于对象内属性的个数，可以直接遍历创建，而删除是单独的功能，用到的方法就是学习过的各种节点操作，内容可以直接添加在数组中即可完成创建（开发时数据在数据库中连接）JS 部分代码： var tbody=document.querySelector('tbody'); for(var i=0;i<dat.
复制链接

扫一扫