动态表格生成与删除功能-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_65085680/article/details/127177220

目录

案例说明：

案例分析：

代码分析：

代码实现：（完整)

注意分析！

案例说明：

根据添加的对象动态生成表格并具有删除功能

案例分析：

当输入对象时，会自动生成表格，并具有删除功能

代码分析：

1.首先需要创建表格的thead部分，tbody部分应为空，因为此时还没有往表格中添加对象

代码如下：
 <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
2.自行设计表格部分样式（注意选择器的使用）
 <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: center;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
3.js部分

（1）准备要输入的学生信息，创建一个数组，数组里装的是对象

var arr=[ {},{},{},......]

var obj ={}; 创建对象，多个属性或方法中间用逗号隔开，键值对：属性名：属性值
    var datas = [{
            name: '小李',
            subject: 'javascript',
            score: 95
        }, {
            name: '小张',
            subject: 'javascript',
            score: 99
        },  {
            name: '小宋',
            subject: 'javascript',
            score: 100
        }];
（2）往tbody里面创建tr 有几个人(根据数组的长度来判断)就有几个tr 【tr 行】

var tr = document.createElement("tr");

（3）将创建的tr添加到tbody中

tbody.appendChild(tr);

（4）创建单元格td并添加td，这里用到了遍历对象
// 遍历对象
     for(var k in obj ){
        k 属性名
        obj[k] 属性值
    }
                       console.log(k);//k 变量输出得到的是属性的名
                       console.log(obj[k]);// 这里得到的是属性的值
（5）创建删除单元格链接点击a不跳转，用到了【javascrippt:;】

首先要新增一个td放置“删除” var td = document.createElement("td");

然后通过inner.HTML创建元素 td.innerHTML = '<a href="javascript:;">删除</a>';
        // 1.往tbody里面创建行 tr 有几个人(根据数组的长度来判断)就有几个tr
        var tbody = document.querySelector("tbody");
        for (var i = 0; i < datas.length; i++) {//外层for循环管创建几个tr(行)
            // 1.创建行
            var tr = document.createElement("tr");
            // 2.添加到tbody里面去
            tbody.appendChild(tr);

            for (var k in datas[i]) {//里层for循环 管创建几个td
                // 2.1.创建单元格
                var td = document.createElement("td");
                td.innerHTML = datas[i][k];
                // 2.1.1 添加单元格
                tr.appendChild(td);
            }
            // 创建删除单元格
            var td = document.createElement("td");
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
（6）删除单元格用到了removeChild，点击“删除”将删除一整行，根据父元素，点击a 删除的是a所在的行也就是tr a.parentNode.parentNode
        //删除操作
        var as = document.querySelectorAll("a");
        for (var i = 0; i < as.length; i++) {
               as[i].onclick=function(){
                // 点击a 删除的是a所在的行 也就是tr (爸爸的爸爸)
                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: 500px;
            margin: 100px auto;
            border-collapse: center;
            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: 95
        }, {
            name: '小张',
            subject: 'javascript',
            score: 99
        },  {
            name: '小宋',
            subject: 'javascript',
            score: 100
        }];
        // 1.往tbody里面创建行 tr 有几个人(根据数组的长度来判断)就有几个tr
        var tbody = document.querySelector("tbody");
        for (var i = 0; i < datas.length; i++) {//外层for循环管创建几个tr(行)
            // 1.创建行
            var tr = document.createElement("tr");
            // 2.添加到tbody里面去
            tbody.appendChild(tr);

            for (var k in datas[i]) {//里层for循环 管创建几个td
                // 2.1.创建单元格
                var td = document.createElement("td");
                td.innerHTML = datas[i][k];
                // 2.1.1 添加单元格
                tr.appendChild(td);
            }
            // 创建删除单元格
            var td = document.createElement("td");
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }

        
        //删除操作
        var as = document.querySelectorAll("a");
        for (var i = 0; i < as.length; i++) {
               as[i].onclick=function(){
                // 点击a 删除的是a所在的行 也就是tr (爸爸的爸爸)
                tbody.removeChild(this.parentNode.parentNode) 
               }
        }

    </script>
</body>

</html>