实现动态表格

已于 2023-01-18 00:15:48 修改
阅读量83 收藏
点赞数
文章标签： css css3 前端
于 2023-01-17 23:49:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l20040121_/article/details/128720645
版权

需求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
实现原理：
1.利用table设置表头样式
2.用目标伪类选择器，设置奇数与偶数行的背景色
3.将数据以对象形式存在数组里，创建字符串变量，遍历数组，利用拼接字符串，输入到表格中。
4.给删除按钮绑定点击事件，设置弹窗是否确定删除
5.给提交按钮绑定点击事件，设置多个变量获取输入框的值，通过innerHtml输入表格
代码：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            color: rgb(247, 4, 4);
            display: inline-block;
        }
        table{
            margin: 0 auto;
            width: 1200px;
        
        }
        th{
            width: 200px;
            height: 50px;
            text-align: center;
            background-color: #f0f0f0;
            border: 1px solid orangered;
    
        }
        #fir td{
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: rgba(3, 46, 3, 0.558);
            border: 1px solid rgb(36, 35, 35);
        }
        tbody tr:nth-child(2n-1){
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: rgb(244, 243, 243);
            color: black;
        }
        tbody tr:nth-child(2n){
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: rgb(138, 138, 138);
            color: white;
        }
        h3{
            margin-left: 120px;
        }
        button{
            width: 200px;
            height: 50px;
        }
        .mid{
            border: 1px solid gray;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 25%;
            left: 33%;
            width: 400px;
            padding-left: 100px;
            background-color: white;
            display: none;
        }
        .mid input{
            width: 200px;
            margin-left: 100px;
        }
        .mid #teach{
            margin-left: 85px;
        }
        .mid button{
            margin-top: 20px;
            margin-right: 30px;
            height: 30px;
        }
        label{
            margin:5px;
        }
    </style>
</head>
<body>
    <table id="tab">
        <tr id="fir">
            <th class="numb">学号</th>
            <th class="name">姓名</th>
            <th class="sex">性别</th>
            <th class="xue">二级学院</th>
            <th class="ba">班级</th>
            <th class="zhuan">专业</th>
            <th class="dao">辅导员</th>
            <th><button id="add">添加</button></th>
        </tr>
        <tbody class="tbody">
           
        </tbody>
    </table>
    <div class="mid">
        <h3>新增人员信息</h3>
        <label for="">学号<input id="numb" type="text"></label>
        <label for="">姓名<input id="name" type="text"></label>
        <label for=""> 性别<input id="sex"  type="text"></label>
        <label for="">学院<input id="xue" type="text" ></label>
        <label for="">班级<input id="ban" type="text"></label>
        <label for="">专业<input id="zhuan" type="text"></label>
        <label for="">辅导员<input id="dao" type="text"></label>
        
        <div id="midBtn">
            <button id="btnLeft">提交</button>
            <button id="btnRight">取消</button>
        </div>
        
    </div>
    <script>
        window.onload=function(){
        var str=[
            {"numb":1,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":2,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":3,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":4,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":5,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":6,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":7,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":8,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":9,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
            {"numb":10,
                "name":"丁真",
                "sex":"男",
                "xue":"锐克",
                "ban":"1",
                "zhuan":"smoke",
                "dao":"刀哥",
                "btn":"删除"
             },
        ]
        var tbod=document.querySelector(".tbody")
        var html = ""
        for (var i = 0; i < str.length; i++) {
            html += "<tr>" + "<td>" + str[i].numb + "</td>" 
                + "<td>" + str[i].name + "</td>"
                 + "<td>" + str[i].sex +"</td>"
                  + "<td>" + str[i].xue + "</td>" 
                  + "<td>" + str[i].ban + "</td>"
                  + "<td>" + str[i].zhuan + "</td>"
                  + "<td>" + str[i].dao + "</td>"
                  + "<td>" + "<a href='#'>"+ str[i].btn +"</a>" + "</td>" + "</tr>"

        }
        tbod.innerHTML = html;


        
        var midd=document.querySelector(".mid")
        var addd=document.getElementById("add")
        addd.addEventListener("click",function(){
            midd.style.display="block"
            midd.style.display="flex"
            var input=document.querySelectorAll("input")
            for(m=0;m<input.length;m++){
                input[m].value=" "
            }
            
        })
       
        
            var btnLeft=document.querySelector("#btnLeft")
            btnLeft.onclick=function(){
                midd.style.display="none"
                var tab=document.getElementById("tab")
                var addNumb=document.getElementById("numb").value
                var addName=document.getElementById("name").value
                var addSex=document.getElementById("sex").value
                var addXue=document.getElementById("xue").value
                var addBan=document.getElementById("ban").value
                var addZhuan=document.getElementById("zhuan").value
                var addDao=document.getElementById("dao").value
                var addTrValue=tbod.insertRow()
                addTrValue.innerHTML="<td>" + addNumb + "</td>" 
                + "<td>" + addName + "</td>"
                 + "<td>" + addSex +"</td>"
                  + "<td>" + addXue + "</td>" 
                  + "<td>" + addBan + "</td>"
                  + "<td>" + addZhuan + "</td>"
                  + "<td>" + addDao + "</td>"
                  + "<td>" + "<a href='#'>"+ "删除" +"</a>" + "</td>"
                  
            
            }
            var btnRight=document.querySelector("#btnRight")
            btnRight.onclick=function(){
                midd.style.display="none"
            }
        
        var Del=document.getElementsByTagName("a")
            for(let i=0;i<Del.length;i++){
                Del[i].onclick=function(){
                        var conf=confirm("确定要删除吗")
                        if(conf){
                        var delTd=Del[i].parentNode
                        var delTr=delTd.parentNode
                        delTd.style.backgroundColor="red"
                        delTr.parentNode.removeChild(delTr)
                        }
                        else{
                            return
                        }
                        
                }
            }
    }
    </script>
</body>
</html>

效果：

QQ录屏20230117230135

l20040121_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现动态生成表格
fengjiao__66666的博客
04-09 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
动态操作表格
qq_58235030的博客
05-15 138
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } a { text-decoration:
动态生成表格
Mr_115的博客
11-05 2060
动态生成表格
动态创建表格（各种管理系统常见）
crystal_iwwish的博客
10-11 430
该案例实现的功能有 功能1.将后端默认数据添加进去 功能2.录入按钮点击之后，将其信息插入到表格中 功能3.删除操作 ▲注意：数据不管是添加还是删除完，都需要重新渲染 功能1.将后端默认数据添加进去 let arr = [ { stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' }, { stuId: 1002, uname: '令狐霸天', age: 29, g..
vue3实现动态表格
Handsome_gir的博客
05-10 418
vue3结合element-plus实现动态表格，可添加、删除、对单行数据判断。
angularjs实现动态表格
04-24
本教程将重点讲解如何使用AngularJS来实现动态表格的功能。 AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间建立直接的联系。在这个场景下，我们可以通过数组来存储表格的数据...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
java 实现动态表格
09-23
动态表格 java动态表格实现方法 很有用得 我找了很长时间的
JQuery实现动态表格点击按钮表格增加一行
10-25
动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下
JavaScript实现动态生成表格
12-28
本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行...
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1216
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 650
仅对已定位的元素（）有效，默认值为0，可以为负值。
css画半圆&&画圆弧
M1512415的博客
07-12 167
【代码】css画半圆&&画圆弧。
CSS上下悬浮特效
m0_56164131的博客
07-09 543
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
forevercui的博客
07-09 1268
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式align-items：flex-start | flex-end | center | baseline | stretch （单行）
CSS - 深入理解选择器的使用方式
zhugedali_的博客
07-09 691
例如， [href^="https"] 会选择 href 属性值以 https 开头的元素， [href$=".com"] 会选择 href 属性值以 .com 结尾的元素， [href*="example"] 会选择 href 属性值包含 example 的元素。例如， div > p 只会选择直接作为 <div> 元素子元素的 <p> 元素，而不会选择 <div> 元素内部的嵌套 <p> 元素。- :last-child 选择父元素的最后一个子元素。
纯CSS瀑布流
u014206461的博客
07-10 280
* 项之间的垂直间距 *//* 每个瀑布流项 *//* 瀑布流容器 */
【前端】css控制背景图片缩放
姜太小白的博客
07-08 393
css控制背景图片缩放
html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭
最新发布
lulei5153的博客
07-13 248
【代码】html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭。
element 实现动态表格代码
07-15
当使用 Element UI 实现动态表格时，你可以按照以下步骤进行： 1. 首先，引入 Element UI 的组件和样式。确保你已经安装了 Element UI 并正确引入了相关的 CSS 和 JS 文件。 2. 在你的 Vue 组件中，创建一个 data ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值