前端基础--javascript动态生成表格小练习

最新推荐文章于 2024-07-06 01:35:56 发布

鱼与云游

最新推荐文章于 2024-07-06 01:35:56 发布

阅读量184

点赞数

文章标签： css 前端 html javascript css3

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128243656

版权

一、需要掌握的知识
二、思路
1. 阐述 .
2. 运行结果
总结

一、需要掌握的知识

HTML表格相关知识
css样式基本设置
简单数组的书写
添加，删除，创建
for循环的知识!important

二、思路

1.阐述

首先先写html骨架，css样式，先是创建行，在创建列，同时把值赋予给单元格，最后一个单元格创建删除键，最后就是删除操作，数据在js里，不在数据库

代码如下（示例）：

   <style>
        table{
            width: 500px;
            border-collapse: collapse;
            text-align: center;
            margin: 20px 20px;
        }
        tr th{
            height:50px;
            line-height: 50px;
            border: 1px solid red;
            background-color: blue;

        }
        tr td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>学科</th>
                <th>成绩</th>
                <th>按钮</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas=[
            {
                name:'张三',
                subject:'计算机操作系统',
                score:100
            },
            {
                name:'李四',
                subject:'计算机网络',
                score:99
            },
            {
                name:'王五',
                subject:'数据结构',
                score:98
            },
            {
                name:'王二麻',
                subject:'高数',
                score:100
            }   
        ]
        var tbd=document.querySelector('tbody');
        for(var i=0;i<datas.length;i++){
            var tr=document.createElement('tr');
            tbd.appendChild(tr);
            for(var k in datas[i]){
                var td=document.createElement('td');
                td.innerHTML=datas[i][k];
                tr.appendChild(td);

            }
            var td=document.createElement('td');
            td.innerHTML='<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        var ass=document.querySelectorAll('a');
        for(var i=0;i<ass.length;i++){
            ass[i].onclick=function(){
                tbd.removeChild(this.parentNode.parentNode);
            }
        }
    </script>