动态表格噢！！

最新推荐文章于 2024-06-10 22:18:41 发布

黄大帅@lz

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量74

点赞数

分类专栏：前端（html+css+js）文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/gua_Piter/article/details/128721253

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、动态表格要求

1.表格由专业班级学号1-10号同学的信息组成，包括: 学号、姓名、性别、二级学院、班级、专业、辅导员;
2.表格的奇数行字体为黑色，底色为白色;偶数行字体为白色，底色为黑色;
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变:
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息

二、实验原理

利用对象的形式插入数据
利用for循环遍历所有的datas（我创建）对象，通过利用datas[i][k]其数据添加tr，td的个数，实现动态表格

三、实验效果

四、代码

<!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>
        .box{
            height: 800px;
            height: 1226px;
            margin: 200px auto;
        }
        th{
            font-size: 35px;
            border: 1px solid black;
        }
        h2{
            width: 600px;
            height: 40px;
            text-align: center;
            font-size: 40px;
            line-height: 40px;
        }
        tr,td{
            border: 1px solid black;
            font-size: 25px;
        }
        a{
            cursor: pointer;
            font-size: 25px;
            list-style: none;
            text-decoration: none;
        }
        #add{
            font-size: 25px;
            position: relative;
            left:638px;
        }
        .add:hover{
            color: gray;
        }
        a:hover{
            color: red;
        }
        .tbody tr:nth-child(2n){
            background-color: black;
            color: #fff;
        }
        #table2 {
            display: none;
            position: absolute;
            left: 800px;
            top:200px

        }
    </style>
</head>

<body>
    <div classroom="box">
        <h2>动态表单</h2>
        <div id="add">增加名单</div>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>二级学院</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>辅导员</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody  classroom="tbody">
            </tbody>
            <div id="box2">
                <table id="table2">
                    <tr>
                        <td>学号:<input type="text" id="number"></td>
                    </tr>
                    <tr>
                        <td>姓名:<input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td>性别:<input type="text" id="gender"></td>
                    </tr>
                    <tr>
                        <td>二级学院:<input type="text" id="school"></td>
                    </tr>
                    <tr>
                        <td>班级:<input type="text" id="classroom"></td>
                    </tr>
                    <tr>
                        <td>专业:<input type="text" id="objects"></td>
                    </tr>
                    <tr>
                        <td>辅导员:<input type="text" id="help"></td>
                    </tr>
                    <tr>
                        <td><button id="btn1">提交</button></td>
                        <td><button id="btn2">退出</button></td>
                    </tr>
                </table>
            </div>
        </table>
    </div>
    <script>
        var datas = [
            {
                number: "111",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "222",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "333",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "444",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "555",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "666",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "777",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "888",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "999",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
            {
                number: "101010",
                name: '张三',
                gender: "man",
                school: "炸锅学院",
                classroom: "14",
                objects: "jsjsjs",
                help: "小武"
            },
        ]

        btn1.onclick = function(){
            
            var name = document.getElementById("name").value
            var gender = document.getElementById("gender").value
            var school = document.getElementById("school").value
            var classroom = document.getElementById("classroom").value
            var objects = document.getElementById("objects").value
            var help = document.getElementById("help").value
             newArr = datas.unshift({
                'name':name,
                'gender':gender,
                'school':school,
                'classrom':classroom,
                'objects':objects,
                'help':help
        })
        }
        var tbody = document.querySelector("tbody")
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr')//创建tr加入到tbodyzhong
            tbody.appendChild(tr)
            //再次通过for循环，将datas里面对应的每一个对象节点中包含的元素个数提取出来，有多少个就创建多少个td
            for (var k in datas[i]) {
                var td = document.createElement("td")
                tr.appendChild(td)
                td.innerHTML = datas[i][k]//datas[0][0]==》111 ==》就表示第一个结点的第一个元素属性值
            }
            //添加删除标签
            var td = document.createElement('td')
            td.innerHTML = `<a classroom="active">删除</a>`
            tr.appendChild(td)
        }
        var as = document.querySelectorAll('a')//把所有的a标签全部选出来
        for(var i =0 ; i<as.length;i++){
            as[i].onclick = function(){
                if(confirm('是否删除')){
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
        }
        var add = document.getElementById('add')
        var table2 = document.getElementById('table2')
        add.onclick = function(){
            table2.style.display = 'block'
        }
       
     
        
    </script>
</body>

</html>

黄大帅@lz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态表格噢！！

1.表格由专业班级学号1-10号同学的信息组成，包括: 学号、姓名、性别、二级学院、班级、专业、辅导员;2.表格的奇数行字体为黑色，底色为白色;偶数行字体为白色，底色为黑色;3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变:4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
复制链接

扫一扫