java前端javascript生成动态表格示例演示

2024-04-02 19:04:59 530人浏览泡泡鱼

摘要

目录前言案例分析代码动图演示结语前言动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是JSON类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今

前言

动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是JSON类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今天我就来写写这部分内容，其实也很简单的，仔细看哦！！！

案例分析

因为里面的学生数据都是动态的，我们需要 js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。所有的数据都是放到 tbody 里面的行里面。因为行很多，我们需要循环创建多个行（对应多少人）。

代码

<!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: 400px;
            border-collapse: collapse;
            margin: 100px auto;
            border: 1px solid #888;
            text-align: center;
        }
        th,td{
            border: 1px solid #888;
            padding: 5px 0px;
        }
        th{
            background-color: skyblue;
        }
        tr:hover{
            cursor: default;
            background-color: pink;
        }
        a:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //动态生成表格
        //data是模拟的后台传来的数据
        var data = [
            {
                "name" :"我是阿牛",
                "class":"javascript",
                "grade": 100
            },
            {
                "name" :"别搞我啊",
                "class":"javascript",
                "grade": 99
            },
            {
                "name" :"我不懂细节",
                "class":"javascript",
                "grade": 98
            },
            {
                "name" :"她说不合适",
                "class":"javascript",
                "grade": 96
            },
            {
                "name" :"神明也无光",
                "class":"javascript",
                "grade": 95
            }
        ];

        var tbody = document.querySelector('tbody');
        for(var i=0;i<data.length;i++){
            var tr = document.createElement('tr');  //创建行
            tbody.appendChild(tr);  // 将tr放到tbody里
            for (var k in data[i]){
                var td = document.createElement('td'); //创建列
                td.innerHTML = data[i][k];  //单元格（列）添加数据
                tr.appendChild(td);   //将td放到tr里
            }

            //创建删除的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a herf="javascript:;" style="color:blue;">' + '删除' + '</a>';
            tr.appendChild(td);
        }

        //实现点击删除两字删除对应的行
        var as = document.querySelectorAll('a');
        for (var i=0;i<as.length;i++){
            as[i].onclick = function(){
                tbody.removeChild(this.parentnode.parentNode);  //this.parentNode.parentNode 代表a的父亲的父亲
            }
        }
    </script>  
</body>
</html>