前端基础进阶-JavaScript核心 DOM BOM操作-第三天课堂案例动态生成表格

weixin_48132252

于 2021-01-06 15:05:13 发布

阅读量209

点赞数

分类专栏： Pink老师前端网课相关内容文章标签： js

本文链接：https://blog.csdn.net/weixin_48132252/article/details/112177555

版权

动态生成表格

表格结构
- 代码实现
- 知识点回顾
创建学生数据
- 代码实现
- 知识点回顾
创建单元格
- 代码实现
- 知识点回顾
实现删除功能
- 代码实现
- 知识点回顾
整体代码

表格结构

代码实现

<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>

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

知识点回顾

border-collapse: collapse; /* 为表格设置合并边框模型： */
表格结构

创建学生数据

代码实现

<script>
        var dates = [{
   
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
   
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
   
            name: '傅恒',

最低0.47元/天解锁文章

weixin_48132252

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础进阶-JavaScript核心 DOM BOM操作-第三天课堂案例动态生成表格

动态生成表格表格结构代码实现知识点回顾三级目录表格结构代码实现知识点回顾border-collapse: collapse; /* 为表格设置合并边框模型： */表格结构三级目录
复制链接

扫一扫