DOM ------ 动态生成表格

简介: DOM ------ 动态生成表格

动态创建表格

1.数组中准备好数据

2.往tbody里创建行

3.往行里创建单元格

4.增加删除操作

5572b53a9cb8476cbad723eddecfcf81.png

<!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>动态生成表格</title>
    <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>
</head>
<body>
    <table cellspacing='0'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        // 1.先去准备好数据
        var datas = [{
            name: '张三',
            subject: 'JavaScript',
            score: 100
        },{
            name: '李四',
            subject: 'JavaScript',
            score: 98
        },
        {
            name: '王五',
            subject: 'JavaScript',
            score: 95
        }]
        // 2. 往tbody里面创建行: 有几个人(通过数组的长度) 就创建几行
        var tbody = document.querySelector('tbody')
        for(var i=0;i<datas.length;i++){  //外面的for循环管行 tr
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            // 2.行里创建单元格(跟数据有关系的三个单元格) td 单元格的数量取决于每个对象里面的属性个数
            for(var k in datas[i]) {//里面的for循环管列 td
                // 创建单元格
                var td = document.createElement('td')
                // 把对象里面的属性值 datas[i][k] 给 td
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k]
                tr.appendChild(td)
            }
            // 3.创建有删除两个字的单元格
            var td = document.createElement('td')
            td.innerHTML = "<a href='javascript:;'>删除</a>"
            tr.appendChild(td)
        }
        // 4. 删除操作 开始
        var as = document.querySelectorAll('a')
        for(var i=0;i<as.length;i++){
            as[i].onclick = function() {
                // 点击 a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        // for(var k in obj){
        //     k 得到的是属性名
        //     obj[k] 得到的是属性值
        // }
    </script>
</body>
</html>

不积跬步无以至千里 不积小流无以成江海

相关文章
|
5月前
|
JSON JavaScript 数据格式
技术好文:tabel表格的dom操作
技术好文:tabel表格的dom操作
24 0
|
6月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
|
JavaScript
DOM ------ 鼠标滑过表格的行变色效果
DOM ------ 鼠标滑过表格的行变色效果
|
JavaScript 前端开发
Dom实操(第二十二课)表格静态创建到动态创建的过程
Dom实操(第二十二课)表格静态创建到动态创建的过程
82 0
|
JavaScript
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
318 0
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
|
JavaScript
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
359 0
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
17天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。