案例：动态表格

最新推荐文章于 2024-07-20 18:56:42 发布

IT噜噜

最新推荐文章于 2024-07-20 18:56:42 发布

阅读量161

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Ghlys/article/details/128701356

版权

本文展示了一个使用HTML、CSS和JavaScript实现的动态表格，表格包含学生信息，具有奇偶行颜色交替显示、行内删除按钮以及添加新学生信息的功能。当点击删除按钮时，会弹出确认提示，点击添加按钮则出现表单用于输入新学生信息。整个实现过程涉及DOM操作、事件监听和用户交互设计。

摘要由CSDN通过智能技术生成

需求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
实现原理：
1、先在js中渲染原本10个同学的信息，再利用css的选择器设置奇数偶数行不同的样式
2、在js中每行添加一个按钮节点，设置按钮的点击事件
3、弹框在html中提前设置后隐藏，利用按钮的点击事件显现
4、删除键的功能实现利用给不同行设置自定义属性辨别点击元素后删除一行的节点
5、添加按钮的功能实现利用表单输入框value值得到输入内容后赋予新建节点
6、两个按钮的取消续隐藏弹框即可
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   <style>
      body{
         height: 100%;
      }
      *{
         margin: 0;
         padding: 0;
      }
      table{
         border: 1px solid rgb(201, 201, 201);
         border-collapse: collapse; 
      }
      .topic{
         background-color: rgb(87, 150, 87);
      }
      th{
         width: 150px;
         border:1px solid grey ;
         font-weight: normal;
      }
      tr:nth-child(even){
         background-color: black;
         color: white;
      } 
      table:first-child{
         border: none;
      }
      table button{
         height: 30px;
      }
      .background{
         float: left;
         width: 1490px;
         height: 900px;
         background-color: rgb(53, 50, 50);
         opacity:0.8;
      }
      .tip{
         width:100px;
         height:50px;
         position: absolute;
         right: 160px;
         top: 145px;
         text-align: center;
         line-height: 50px;
         font-weight: 500;
         font-size: 18px;
         color: #ffffff;
         background-color: #4b8d4b;
         border-radius:10px;
         cursor: pointer;
      }
      #form{
         width: 400px;
         height: 400px;
         margin:100px auto;
         background-color:rgb(247, 247, 247);
         border: 1px solid rgb(41, 41, 41);
         position: relative;
         display: none;
      }
      #form div{
         margin: 20px 0 0 30px;
         display: inline
      }
      #form>.topic{
         height: 40px;
         background-color: rgb(148, 146, 146);
         border-bottom: 1px solid rgb(41, 41, 41);
         margin: 0;
         padding-left:15px ;
         line-height: 40px;
         color: white;
         display: block;
      }
      #form input{
          margin:20px 110px 0 0;
      }
      #form select{
          margin:20px 190px 0 0;
      }
      #form .y{
         width: 40px;
         height: 20px;
         line-height: 20px;
         text-align: center;
         border: 1px solid black;
         border-radius: 4px;
         background-color: rgb(148, 146, 146);
         position: absolute;
         bottom: 20px;
         left: 90px;
         cursor: pointer;
      }
      #form .n{
         width: 40px;
         height: 20px;
         line-height: 20px;
         text-align: center;
         border: 1px solid black;
         border-radius: 4px;
         position: absolute;
         bottom: 20px;
         right: 120px;
         cursor: pointer;
      }
   </style>
</head>
<body>
  <!-- 固定表头-->
   <table>
      <tr class="topic">
         <th>学号</th>
         <th>姓名</th>
         <th>性别</th>
         <th>二级学院</th>
         <th>班级</th>
         <th>专业</th>
         <th>辅导员</th>
      </tr>
   </table>
  <!--  添加新成员按钮 -->
   <div class="tip">添加新成员</div>
   <!-- 填写新成员信息表单 -->
   <form id="form">
      <!-- 表单头部 -->
      <div class="topic">成员信息</div>
      <!-- 表单内容 -->
      <div>学号：</div>
         <input type="tel" placeholder="请输入学号" name="xuehao">
      <div>姓名：</div>
         <input type="text" placeholder="请输入姓名" name="xingming">
      <div>性别：</div>
      <select id="xingbie">
         <option value="" selected disabled>请选择性别</option>
         <option value="">男</option>
         <option value="">女</option>
      </select>
      <div>二级学院：</div>
         <input type="text" placeholder="请输入二级学院" name="erji">
      <div>班级：</div>
         <input type="text" placeholder="请输入班级" name="banji">
      <div>专业：</div>
         <input type="text" placeholder="请输入专业" name="zhuanye">
      <div>辅导员：</div>
         <input type="text" placeholder="请输入辅导员" name="fudao">
         <!-- 表单按钮 -->
         <div class="y">确定</div>
         <div class="n">取消</div>
   </form>
 
   <script>
      //原成员信息
      var heihei=document.getElementsByClassName("information")
      var numbers=["200101","200102","200103","200104","200105","200106","200107","200108","200109","200110"]
      var names=["小红","小白","小白","小黄","小绿","小橙","小蓝","小青","小紫","小灰"]
      var genders=["女","男","男","男","女","女","女","女","男","男"]
      var unniverses=["计算机工程学院"]
      var classNums=["2227"]
      var subjects=["物联网工程"]
      var teachers=["张小武"]
      //渲染成员信息
      for(var i=0;i<names.length;i++){
         var hang=document.createElement("tr")
         $("table").append(hang)
         var number=document.createElement("th")
         number.innerHTML=numbers[i]
         hang.append(number)
         var nam=document.createElement("th")
         nam.innerHTML=names[i]
         hang.append(nam)
         var gender=document.createElement("th")
         gender.innerHTML=genders[i]
         hang.append(gender)
         var unniverse=document.createElement("th")
         unniverse.innerHTML=unniverses
         hang.append(unniverse)
         var classNum=document.createElement("th")
         classNum.innerHTML=classNums
         hang.append(classNum)
         var subject=document.createElement("th")
         subject.innerHTML=subjects
         hang.append(subject)
         var teacher=document.createElement("th")
         teacher.innerHTML=teachers
         hang.append(teacher)
         //渲染删除按钮
         var btn_delete=document.createElement("button")
         btn_delete.innerHTML="delete"
         btn_delete.dataset.index=`${i}`
         hang.append(btn_delete)
      }

      //添加新成员按钮事件
      $(".tip").click(function(){
         $("table").css(`display`,`none`)
         $(".tip").css(`display`,`none`)
         $("#form").css(`display`,`block`)
      })
      //新成员信息保存与渲染函数
      function handler(){
         //使用表单的serialize获取到字符串格式的表单信息（乱码）+下拉菜单选中项内容
       let newmenbers= $(`form`).serialize()+'&xingbie=' + $('select option:selected').text()
       //将得到的乱码转为中文
       newmenbers=decodeURIComponent(newmenbers,true)

       for(var i=0;i<7;i++){  
          //字符串转为数组，但此时数组成员存在name值
         var newmenber= newmenbers.split("&")[i];
         //将去掉&符号的成员信息数组转化为字符串
         newmenber=newmenber+" "
         //去掉nanme值和value值连接的符号=并转化为数组
         var value=newmenber.split("=")
         //对应数组信息创建新节点
         switch(i){
            case 0:
            var hang=document.createElement("tr")
            $("table").append(hang)
            var number=document.createElement("th")
            number.innerHTML=value[1]
            hang.append(number)
            break
            case 1:
            var nam=document.createElement("th")
            nam.innerHTML=value[1]
            hang.append(nam)
            break
            case 2:
            var unniverse=document.createElement("th")
            unniverse.innerHTML=value[1]
            hang.append(unniverse)
            break
            case 3:
            var classNum=document.createElement("th")
            classNum.innerHTML=value[1]
            hang.append(classNum)
            break
            case 4:
            var subject=document.createElement("th")
            subject.innerHTML=value[1]
            hang.append(subject)
            break
            case 5:
            var teacher=document.createElement("th")
            teacher.innerHTML=value[1]
            hang.append(teacher)
            break
            case 6:
            var gender=document.createElement("th")
            gender.innerHTML=value[1]
            hang.insertBefore(gender,unniverse)
            break
         }
         //返回原页面
         $("table").css(`display`,`block`)
         $(".tip").css(`display`,`block`)
         $("#form").css(`display`,`none`)
      }
      //渲染新成员按钮
      var btn_delete=document.createElement("button")
         btn_delete.innerHTML="delete"
         btn_delete.dataset.index=`${i}`
         hang.append(btn_delete)
         return false
      }
     //确定添加新成员
    $(".y").click(function(){
         handler()
      })  
      //取消添加新成员
    $(".n").click(function(){
      $("table").css(`display`,`block`)
      $(".tip").css(`display`,`block`)
      $("#form").css(`display`,`none`)
      })  
      //删除键功能
      $("table button").click(function(){
         //弹出是否删除的确认框
         console.log(this.parentNode)
            var sure=confirm(`是否删除该成员信息？`)
            //确认删除整行节点
            if(sure){
               this.parentNode.remove()
            }
            //取消删除节点
            else{
               return
            }
      })
   </script>
</body>
</html>

效果：

动态表格