表格的增加删除

最新推荐文章于 2024-10-18 17:23:02 发布
最新推荐文章于 2024-10-18 17:23:02 发布
阅读量253 收藏
点赞数
文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43811708/article/details/125562524
版权

<!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>学员信息表</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src="./vue.js"></script>

    <style>

        [v-cloak] {

            display: none;

        }

    </style>

</head>

<body>

    <div id="app" class="container" v-cloak>

        <h2 class="text text-center text-success">学员信息表单</h2>

        <div class="form-group">

            <label for="username">用户名</label>

            <input v-model="user.name" type="text" class="form-control" id="username" placeholder="请输入用户名">

        </div>

        <div class="form-group">

            <label for="phone">手机号</label>

            <input v-model="user.phone" type="text" class="form-control" id="phone" placeholder="请输入手机号">

        </div>

        <div class="form-group">

            <label for="remark">备注</label>

            <input v-model="user.remark" type="text" class="form-control" id="remark">

        </div>

        <button @click="add" type="submit" class="btn btn-success">添加</button>

        <button @click="reset" type="submit" class="btn btn-info">重置</button>

        <h2 class="text text-center text-warning">学员信息表</h2>

        <table class="table table-bordered table-hover">

            <thead>

                <tr>

                    <th>序号</th>

                    <th>姓名</th>

                    <th>手机号</th>

                    <th>备注</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <!-- 如果表格里有数据 -->

                <template v-if="students.length>0">

                    <tr v-for="(item,index) in students" :key="item.id">

                        <td>{{item.id}}</td>

                        <td>{{item.name}}</td>

                        <td>{{item.phone}}</td>

                        <td>{{item.remark}}</td>

                        <td>

                           

                            <button @click="del(index)" class="btn btn-danger">删除</button>

                           

                        </td>

                    </tr>

                </template>

                <!-- 如果表格里没有数据 -->

                <tr v-else>

                    <td colspan="5">暂无数据</td>

                </tr>

            </tbody>

        </table>

        <div v-if="students.length>0">

            <button @click="delAll" class="btn btn-primary">全部删除</button>

        </div>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data: {

                //表单数据

                user: {

                    name: '', //用户名

                    phone: '', //手机号

                    remark: '', //备注

                },

                // 表格数据

               

                // 判断students在不在localStorage中，如果在就进行获取，不在显示空

                students:localStorage.getItem('students') ? JSON.parse(localStorage.getItem('students')) : [],

                // students: [

                //     {

                //         id: 1,

                //         name: '张三',

                //         phone: '110',

                //         remark: '张三'

                //     },

                //     {

                //         id: 2,

                //         name: '李四',

                //         phone: '121',

                //         remark: '李四'

                //     },

                //     {

                //         id: 3,

                //         name: '王五',

                //         phone: '119',

                //         remark: '王五'

                //     }

                // ]

            },

            methods: {

                // 添加数据

                add() {

                    let obj = {

                        id: this.students.length + 1,

                        // name:this.user.name,

                        // phone:this.user.phone,

                        // remark:this.user.remark

                    // 或者

                        ...this.user

                    }

                    // console.log(this.user);

                   

                    // 将obj中的数据添加到students中

                    this.students.push(obj);

                    // 将数据存入localstorage中

                    localStorage.setItem('students',JSON.stringify(this.students))

                    // 添加成功后清空

                    this.reset()

                },

                // 重置

                reset() {

                    this.user = {

                        name: '', //用户名

                        phone: '', //手机号

                        remark: '', //备注

                    }

                },

                // 删除

                del(index) {

                    this.students.splice(index,1);

                    if(this.students.lengh == 0){

                        // 移除localStorage

                        localStorage.removeItem('students')

                    }else{

                        localStorage.setItem('students',JSON.stringify(this.students))

                    }

                   

                },

                // 全部删除

                delAll() {

                    this.students = [];

                    // 移除localStorage

                    localStorage.removeItem('students')

                },

               

            }

        })

    </script>

</body>

</html>

沙粒。
关注
jquery实现添加删除表格
qq_48294048的博客
10-04 1923
css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box;
17-DOM-案例：动态表格添加删除和表格校验
记录java学习日常~
05-18 436
实现一个动态表格，包含三个输入框和一个添加按钮，用户可以输入编号、姓名、性别添加至表格，每行数据后面都有一个删除按钮可以删除对应行。同时在输入时会进行非空校验，在添加完一行数据后会将输入框清空以便下次输入。
html表格增加删除和修改,表格的增删改demo
weixin_35798040的博客
06-03 1887
前端菜鸟，下午没什么活儿，写了个不过脑子的demo，十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。设计感为0，页面配色丑得我都不想看，在此膜拜我司UI工程师，很多实现功能的地方没有想到更好的办法，希望各位大佬斧正！效果图html结构姓名性别公会属性级别操作name1sex1party1proper1level1编辑删除添加删除姓名:性别:请选择女男公会:请选择妖精的尾巴剑齿之虎蛇姬之鳞魔女之罪属...
jQuery表格添加删除记录
m0_51435825的博客
12-11 302
jQuery表格添加删除记录
JavaScript实现表格增加删除
qq_48128672的博客
11-26 482
javaScript实现表格增删
js表格增加和删除
JI1234567891的博客
09-12 1440
js表格增加和删除
html+java script实现表格添加删除编辑保存
weixin_66489187的博客
10-27 795
html+java script实现表格添加删除编辑保存
excel表格如何添加删除线
记录个人成长, 分享好用资源
11-02 5417
在某些特殊情况，有数据在excel表格里，你要删除但是不太确定，这个时候就可以给字体添加删除线来进行标记一下
js实现添加删除表格
qq_48294048的博客
10-06 2051
效果: 1、 点击添加按钮往table中添加一行将全选前面的复选框变成false 1.1 、当前新增的复选框加上点击事件 2、 点击删除按钮获取表格体中被选中的行,删除整个tr,将全选前面的复选框变成false 获取的是第一个td中的checkbox的状态checked为true2层父子 3 、点击全选按钮前面的复选框如果被选中下面的每一个复选框都被选中如果不被选中下面的每一个复选框都不被选中 4、 点击每一个表格体中的复选框,如果所有的复选框都...
DOM表格操作 添加删除
baobao__的博客
09-08 1174
DOM表格操作1.获取表格元素 1.获取表格元素
vue.js动态表格增加删除修改代码
06-24
在“vue.js动态表格增加删除修改代码”中，我们将探讨如何利用Vue.js实现一个功能丰富的动态表格，包括添加新记录、删除现有记录以及编辑表格中的数据。这个示例可能涉及到以下关键知识点： 1. **Vue实例和数据绑定...
Vue.js实现的表格增加删除demo示例
10-18
Vue.js实现的表格增加删除功能主要涉及Vue.js框架中的数据绑定、组件化以及事件处理等核心概念。Vue.js是一个轻量级的前端JavaScript框架，它支持MVVM（Model-View-ViewModel）架构，能够简化前端开发流程。在这个小...
angularJs 表格添加删除修改查询方法
10-18
根据提供的文件内容，本文将介绍在AngularJS中如何实现一个带有添加、删除、修改和查询功能的表格。AngularJS是一款流行的前端JavaScript框架，由谷歌支持，用于构建动态Web应用程序。它通过数据绑定和依赖注入的...
jQuery表格增加删除代码.zip
07-05
首先，我们从标题"jQuery表格增加删除代码.zip"可以推断，这个压缩包包含的是一个使用jQuery实现的表格动态操作的示例。这种功能通常用于用户需要动态添加或删除表格行的场景，比如在线表单填写、数据管理界面等。 ...
使用Java实现PDF到HTML的转换
从改变自己开始
10-15 864
由于网上也有大量解析方法，但是适合自己的才是最好的，这里重点讲一个踩坑的，开始我通过com.spire.pdf.PdfDocument/3.9.0方式在本地解析成功了，但是发布到测试环境却解析报错，估计是版本低导致被发现了，后面通过升级版本后不报错了，但是因为包含表格又只能解析前面三页或者除了表格的那两页，其他都能解析出来。但是奈何需求没有那么简单，我的PDF是包含表格，且表格里的内容有残次不齐竖着的文本，而且还要去除首页内容，所以我这次用的方式是现将PDF截取首页后重新生成PDF，然后再转换成HTML。
.net 根据html的input type=“week“控件的值获取星期一和星期日的日期
最新发布
代码笔记
10-18 188
.net 根据html的input type="week"控件的值获取星期一和星期日的日期 说明： ①我选中了week控件的：第42周(即2024年的第42个周，值为：2024-W42，格式为：yyyy-WW) ②截取字符串，获得年：2024，和年度第几周：42，开始计算日期，见js部分 ③计算获得：第42周的，星期一是“2024-10-14”，星期日是“2024-10-20” ④传递着两个日期值到MVC后台，对数据库进行日期范围的SQL查询
前端学习---(1)HTML
Fuly的博客
10-18 193
span标签：和div的作用一致，但不换行。span只是文本级的标签 span里面只能放置文字、图片、表单元素。span里面不能放p、h、ul、dl、ol、div。不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。超文本: 图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。div标签：可以把标签中的内容分割为独立的区块。HTML 不是一种编程语言，是一种描述性的标记语言。
深入解析浮动布局及其在现代Web开发中的应用与替代(浮动的概念及应用、如何清除浮动、使用Flex布局和Grid布局的区别、使用`float`布局的历史和现状)
项目git同名HuYaochao，未入职
10-15 947
在CSS布局的历史中，`float`属性曾是网页布局的主要工具之一。然而，随着现代布局技术（如`Flexbox`和`Grid`）的兴起，`float`布局逐渐被替代。本博客将探讨`float`的概念、应用、清除浮动的方式，以及现代布局技术`Flex`和`Grid`的区别，并讨论`float`布局的历史和现状。
PDF转HTML：免费工具&代码方式
weixin_66974439的博客
10-15 361
PDF转HTML
vue实现表格增加删除
09-09
使用`v-for`遍历数据，并提供添加和删除按钮： ```html (item, index) in $store.state.tableData"> <!-- ... item内容 --> <td><button @click="deleteRow(index)">删除</button></td> <td><input type...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值