实现动态表格

最新推荐文章于 2024-08-26 14:18:59 发布
最新推荐文章于 2024-08-26 14:18:59 发布
阅读量345 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meg_Fu/article/details/128688692
版权

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

<!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>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    #add{
        display: block;
        position: absolute;
        top: 50px;
        right: 50px;
        width: 50px;
        height: 40px;
        font-size: 20px;
        line-height: 30px;
        background-color: #1F92CB;
        color: rgb(236, 236, 87);
        border: 0;
    }
    #table{
        width: 1000px;
        margin: 100px auto;
        border: 1px solid rgb(157, 157, 157);
    }
    #table a{
        color: rgb(255, 0, 0);
    }
    #table tr{
        text-align: center;
    }
    #table tr th{
        border: 1px solid rgb(157, 157, 157);
    }
    #table tr:nth-child(2n){
        color: rgb(22, 22, 22); 
        background-color: rgb(236, 236, 87);
    }
    #table tr:nth-child(2n+1){
        color: rgb(22, 22, 22); 
        background-color: #1F92CB;
    }
    #table2{
        width: 400px;
        height: 350px;
        border: 1px solid rgb(157, 157, 157);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 100px auto;
        background-color: rgb(241, 241, 241);
    }
    #table2 tr input{
        right:0;
    }
    #table2 button{
        margin-top: 20px;
    }
    #box{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: rgb(250, 235, 215,0.5);
    }
	</style>
</head>
<body>
    <button id="add">添加</button>
    <table id="table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>二级学院</th>
            <th>班级</th>
            <th>专业</th>
            <th>辅导员</th>
            <th>是否删除</th>
        </tr>
        <tr>
            <td>202301</td>
            <td>刘一</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202302</td>
            <td>陈二</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202303</td>
            <td>张三</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202304</td>
            <td>李四</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>202305</td>
            <td>王五</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>01</td>
            <td>计算机科学与技术</td>
            <td>刘老师</td>
            <td class="td"><a href="#">删除</a></td>
        </tr>
    </table>
    <div id="box">
        <table id="table2">
            <tr>
                <td>学号:<input type="text" id="id"></td>
            </tr>
            <tr>
                <td>姓名:<input type="text" id="name"></td>
            </tr>
            <tr>
                <td>性别:<input type="text" id="sex"></td>
            </tr>
            <tr>
                <td>二级学院:<input type="text" id="school2"></td>
            </tr>
            <tr>
                <td>班级:<input type="text" id="classroom"></td>
            </tr>
            <tr>
                <td>专业:<input type="text" id="profess"></td>
            </tr>
            <tr>
                <td>辅导员:<input type="text" id="teacher"></td>
            </tr>
            <tr>
                <td><button id="up">提交</button></td>
                <td><button id="over">退出</button></td>
            </tr>
        </table>
    </div>
    <script>
        function deleta(){
            var tr = this.parentNode.parentNode
            var decide = confirm("是否删除?")// 显示提示
            if(decide){
                tr.parentNode.removeChild(tr)
            }
        }
        window.onload=function(){
            var add = document.getElementById("add")
            var link = document.querySelectorAll(".td a")
            var up = document.getElementById("up")
            
            for(var i=0;i<link.length;i++){// 为每一个a标签绑定一个响应函数
                link[i].onclick=deleta
            }
            var box = document.getElementById("box")
            var over = document.getElementById("over")

            up.onclick=function(){
            var id = document.getElementById("id").value
            var name = document.getElementById("name").value
            var sex = document.getElementById("sex").value
            var school2 = document.getElementById("school2").value
            var classroom = document.getElementById("classroom").value
            var profess = document.getElementById("profess").value
            var teacher = document.getElementById("teacher").value
            var tr = document.createElement("tr") //创建一个tr标签
            tr.innerHTML="<td>"+id+"</td>"+
                        "<td>"+name+"</td>"+
                        "<td>"+sex+"</td>"+
                        "<td>"+school2+"</td>"+
                        "<td>"+classroom+"</td>"+
                        "<td>"+profess+"</td>"+
                        "<td>"+teacher+"</td>"+
                        "<td class='td'><a href='#'>删除</a></td>" //添加tr标签以及其子标签
                var a = tr.getElementsByTagName("a")[0] // 获取tr标签中的a标签
                a.onclick = deleta; // a标签绑定响应函数
                
                var table = document.getElementById("table")
                var tbody=table.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr)
            }
            add.onclick=function(){
                box.style.display="flex"
            }
            over.onclick=function(){
                box.style.display="none"
            }
            
        }
    </script>
</body>
</html>

效果
在这里插入图片描述

Whnist
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态添加表格
weixin_54668937的博客
06-08 874
文献种类：专题技术文献； 开发工具与关键技术： VS、jQuery 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 6 月 8日 下面我们来看一下如何动态的添加表格数据。 我们主要会用到each()方法和append()方法， 前者是用来为每个匹配的元素规定运行的函数， 后者是用来给被选择到的元素的结尾插入内容。 知道了each ()方法和append()方法的作用后，我们接下来开始编写动态添加表格的代码， 我们要先把相应的数据库引入，然后再创建视图， 因为后面需要用到Boo
在html中生成动态表格数据,JavaScript实现网页动态生成表格
weixin_34320235的博客
06-05 3670
JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下在网页中，动态生成列表的内容，将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。动态生成表格table {border-collapse: collapse;margin-top: 20...
动态表格添加删除
qq_28569939的博客
09-07 292
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> div { text-align: center; margin: 50px; } table { .
案例动态创建表格
qq_38068491的博客
10-10 195
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="text" name
实现动态生成表格
fengjiao__66666的博客
04-09 332
<!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>..
js实现动态表格
qq_36760873的博客
10-06 2602
js实现动态表格 1.实现效果图 2.代码呈上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <script type="text/javascript"> ...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
网页模板——vue实现动态表格数据查询筛选代码.zip
11-23
在本资源中，“网页模板——vue实现动态表格数据查询筛选代码.zip”是一个包含Vue.js实现的动态表格数据查询和筛选功能的代码示例。Vue.js是目前非常流行的前端JavaScript框架，它简化了网页开发，尤其是处理用户...
angularjs实现动态表格
04-24
本教程将重点讲解如何使用AngularJS来实现动态表格的功能。 AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间建立直接的联系。在这个场景下，我们可以通过数组来存储表格的数据...
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
巧用Excel函数实现动态图表的制作.docx
03-16
使用 Excel 函数实现动态图表的制作 Excel 中的图表和函数的功能非常强大。在一般的使用中，大家往往只限于静态图表的制作。作者结合实例，详细讲解了 OFFSET 函数的使用格式，同时介绍了 OFFSET 和 Excel 图表结合...
CSS中的元素布局与定位详细说明
weixin_43354152的博客
08-24 818
在CSS开发中，很重要的一个工作就是根据UI设计稿，进行元素的布局与定位，使得元素（比如某一段文本、按钮、图片等）显示在页面正确的位置。本文就元素的布局与定位方面，做一些讲解和说明。
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 263
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS 的font-variant属性
读心悦
08-26 331
CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。
CSS 的文字平滑属性font-smooth
读心悦
08-23 341
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
CSS溢出——WEB开发系列20
最新发布
一条晒干的咸鱼的博客
08-26 715
在网页设计中，“溢出”是一个常见且重要的概念。它涉及到如何处理那些超出预定范围的内容，以确保网页的布局和视觉效果达到预期。
响应式Web设计：纯HTML和CSS实现技巧
衍生星球的博客
08-23 445
响应式Web设计是一种确保网页在不同设备和屏幕尺寸下都能良好显示的设计方法。：使用相对单位（如百分比）而非固定单位（如像素）来定义元素的宽度，使元素能根据容器宽度动态调整。：先为移动设备设计样式，然后使用媒体查询为更大屏幕添加样式，确保小屏幕体验。：根据不同屏幕尺寸应用不同的CSS规则，是实现响应式设计的核心技术。：使用相对单位设置字体大小和图片宽度，使它们能根据屏幕尺寸自适应。或结合Flexbox和Grid布局创建适应不同设备的导航菜单。：提供更灵活的布局方式，使元素在容器内自动调整位置和大小。
从CSS注入到渗透未知网页
2401_83799022的博客
08-23 930
​ 仅代表一些css注入的思想，实际攻击的话外带的用户的敏感页面数据整体还是比较难的。HTML注入攻击是一种网络攻击，攻击者将恶意HTML代码注入到Web应用程序中，操控页面的显示和行为。相比于传统的html注入，CSS注入通常是指通过注入恶意CSS代码来操纵页面样式，而不是直接执行JavaScript。选择器是CSS Selectors Level 4 中的一个提案，用于选择包含特定后代元素的父元素。利用页面中未过滤的用户输入，通过注入恶意CSS代码，操控页面样式或进行间接攻击。
CSS 的了解text-rendering属性
读心悦
08-23 510
然而，由于这个值较新，且支持情况可能因浏览器而异，因此在广泛使用之前可能需要更多的测试和验证。浏览器可能会使用抗锯齿技术或其他技术来改善文本的视觉效果，但这也可能导致渲染速度下降。时需要注意的是，虽然它可以提高文本的可读性或渲染速度，但过度使用可能会影响网页的整体性能和布局。最后，由于网页设计的不断发展和浏览器的持续更新，建议定期检查最新的 CSS 规范和浏览器支持情况，以便及时了解并使用新的特性和技术。因此，在使用时应该考虑到这些因素，并进行适当的测试以确保跨浏览器的兼容性。此外，不同的浏览器可能对。
element 实现动态表格代码
07-15
当使用 Element UI 实现动态表格时，你可以按照以下步骤进行： 1. 首先，引入 Element UI 的组件和样式。确保你已经安装了 Element UI 并正确引入了相关的 CSS 和 JS 文件。 2. 在你的 Vue 组件中，创建一个 data 属性，用于存储表格的数据和列定义。例如： ```javascript data() { return { tableData: [], // 存储表格数据 tableColumns: [ // 表格列定义 { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'age' }, { label: '性别', prop: 'gender' } ] } } ``` 3. 在模板中使用 el-table 和 el-table-column 组件来渲染表格。通过 v-for 指令循环渲染列定义和表格数据。例如： ```html <template> <div> <el-table :data="tableData"> <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column> </el-table> </div> </template> ``` 4. 在 Vue 的生命周期钩子函数（如 mounted）中，通过异步请求或其他方式获取表格数据，并将其赋值给 tableData 属性。例如： ```javascript mounted() { // 发起异步请求获取表格数据 fetchData().then(response => { this.tableData = response.data; }); } ``` 这样，你就可以使用 Element UI 实现动态表格了。根据你的具体需求，你可能还需要处理分页、排序、编辑等功能。Element UI 提供了丰富的 API 和事件供你使用。你可以参考 Element UI 的官方文档和示例来了解更多用法和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值