动态表格.

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量458 收藏
点赞数
分类专栏： 小案例 文章标签： 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73104281/article/details/128715310
版权

需求

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

原理

  1. 将数据以对象形式存在数组里，创建字符串变量，遍历数组，利用拼接字符串，将数据按索引输入到表格中。
  2. 用目标伪类选择器，设置奇数与偶数行的背景色。
  3. 给删除按钮绑定点击事件，执行confirm与删除函数的命令，利用if语句判断是否继续执行。
  4. 给添加按钮绑定点击事件，改变表单弹窗的display状态，遍历输入框的值为空，给提交按钮绑定点击事件，设置多个变量获取输入框的值，用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;
            text-decoration: none;
        }
        
        table{
            margin: 0 auto;
            width: 1200px;
            /* border: 1px solid gray; */
        
        }
        th{
            width: 150px;
            height: 50px;
            text-align: center;
            background-color: rgba(98, 61, 76, 0.558);
            border: 1px solid rgb(36, 35, 35);
        }
        #fir td{
            width: 150px;
            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: 150px;
            height: 30px;
            /* border: 1px solid rgb(6, 6, 6); */
            text-align: center;
            background-color: rgb(244, 243, 243);
            color: black;
        }
        tbody tr:nth-child(2n){
            width: 150px;
            height: 30px;
            text-align: center;
            background-color: rgb(138, 138, 138);
            color: white;
        }
        a{
            color: rgb(247, 4, 4);
            display: inline-block;
        }
        h3{
            margin-left: 120px;
        }
        button{
            width: 150px;
            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="yuan">二级学院</th>
            <th class="cla">班级</th>
            <th class="spe">专业</th>
            <th class="teach">辅导员</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="yuan" type="text" ></label>
        <label for="">班级<input id="class" type="text"></label>
        <label for="">专业<input id="spe" type="text"></label>
        <label for="">辅导员<input id="teach" 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":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":2,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":3,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":4,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":5,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":6,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":7,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":8,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":9,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "btn":"删除"
            },
            {"numb":10,
            "name":"张三",
            "sex":"男",
            "yuan":"A院",
            "class":1,
            "spe":"a专业",
            "teach":"a老师",
            "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].yuan + "</td>" 
                  + "<td>" + str[i].class + "</td>"
                  + "<td>" + str[i].spe + "</td>"
                  + "<td>" + str[i].teach + "</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=" "
            }
            //下次添加保证输入框为空
        })
        //动态添加
        
           
        
        // addNumb,addName,addSex,addYuan,addClass,addSpe,addTeach
            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 addYuan=document.getElementById("yuan").value
                var addClass=document.getElementById("class").value
                var addSpe=document.getElementById("spe").value
                var addTeach=document.getElementById("teach").value
                var addTrValue=tbod.insertRow()
                addTrValue.innerHTML="<td>" + addNumb + "</td>" 
                + "<td>" + addName + "</td>"
                 + "<td>" + addSex +"</td>"
                  + "<td>" + addYuan + "</td>" 
                  + "<td>" + addClass + "</td>"
                  + "<td>" + addSpe + "</td>"
                  + "<td>" + addTeach + "</td>"
                  + "<td>" + "<a href='#'>"+ "删除" +"</a>" + "</td>"
                  
            
            }
            var btnRight=document.querySelector("#btnRight")

            // btnLeft.οnclick=function(){
            //     
            // }
            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>

动态表格

时不久留
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个表格，显示班级的学生信息——javascript
a3427603的博客
11-16 4814
编程练习 制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行
动态操作表格
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:
html-优秀学生信息表格
m0_46688827的博客
12-15 2292
如何用html实现下图所示的优秀学生信息表： 首先，观察该表的表格的结构标签： 1、表标题：优秀学生信息表格，用`caption` 2、表头单元格：年纪，姓名，学号，班级，加粗表示,用 `th` 3、高三年级跨行合并，`rowspan` 4、班级这一列，表宽度大于其他三列，`width` 5、评语跨列合并,`colspan`
jQuery实现表格元素动态创建功能
10-20
主要为大家详细介绍了jQuery实现表格元素动态创建功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
编辑练习--动态表格
weixin_30388677的博客
12-25 84
编程练习 制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #007aff，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 <!DOCTYPE html> <html> <head> <title> new doc...
动态生成表格
车明强的博客
10-22 155
//获取元素 //点击button //获取rol //获取col //创建table节点 //根据rol插入行数 //根据col插入列数 //在最后一个列中插入一个a标签 //点击a标签删除当前行 <input type="text" placeholder="输入行"/> <input type="text" placeholder="输入列"/> <button>插入表格</button> <script t
05动态创建表格.html
05-23
输入行数和列数可以直接创建表格
案例：动态生成表格.html
06-09
动态生成删除表格，没有相关的数据库，主要是存在数组里面的数据来进行删除，设计的重点主要是对节点的操作
【JavaScript源代码】JavaScript实现简单动态表格.docx
12-29
JavaScript实现简单动态表格 　本文实例为大家分享了JavaScript实现简单动态表格的具体代码，供大家参考，具体内容如下　代码：　<!DOCTYPE html>　　<html lang="en">　　<head>　　 <meta charset="UTF-8">　动态...
13-动态创建表格.html
02-15
13-动态创建表格.html
12-动态创建表格.html
02-15
12-动态创建表格.html
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 464
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Haproxy搭建Web群集
wkysdhr的博客
07-08 882
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
最新发布
读心悦
07-10 195
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
JS混淆基本类型和原理
朴拙科技的博客
07-06 712
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 232
【代码】​​ 翻页 上一页/下一页。
音乐播放器
m0_73755059的博客
07-05 741
【代码】音乐播放器。
图片压缩代码和实际操作页面
英雄汉孑的博客
07-05 1032
轻盈视界，高清依旧 —— 智能图片压缩，大容量，小体积，精彩不打折
myeclipse开发ssm框架项目图书管理系统 mysql数据库web计算机毕业设计项目
qq_251836457的博客
07-07 966
摘 要随着计算机的广泛应用，其逐步成为现代化的标志。图书馆的信息量也会越来越大，因此需要对图书信息、借书信息、还书信息等进行管理，及时了解各个环节中信息的变更，要对因此而产生的单据进行及时的处理，为了提高高校图书馆自动化的管理，能够更快速的满足用户的要求，提高各种工作的效率，现对其设计相应的系统，以达到上述的目的。随着科学技术的进步，计算机行业的迅速发展，计算机信息处理系统的引进已彻底改变了许多系统的管理方式。因此，开发一款高校图书管理系统是至关重要的。根据需求，确定系统采用JSP技术，JAVA作为编程语言
layui 销毁动态表格
03-27
在layui中，销毁动态表格可以通过以下步骤实现： 1. 首先，你需要获取到动态表格的实例对象。可以通过`table.render()`方法的返回值来获取到表格实例对象。 2. 接下来，使用表格实例对象的`destroy()`方法来销毁...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值