<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

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

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

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

			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

	</head>

	<body>

		<div id="app" style="width: 1000px;margin: 0 auto;margin-top: 60px;">

			<div class="form-group">

				<label>手机号</label>

				<input type="text" class="form-control" placeholder="(请输入手机号)" style="width: 500px;" v-model="mobile" />

			</div>

			<div class="form-group">

				<label>邮箱</label>

				<input type="text" class="form-control" placeholder="(请输入电子邮箱)" style="width: 500px;" v-model="email" />

			</div>

			<div class="form-group">

				<label>真实姓名</label>

				<input type="text" class="form-control" placeholder="(姓名必须是中文汉字)" style="width: 500px;"

					v-model="realname" />

			</div>

			<button type="button" class="btn btn-primary" @click="add">立即添加</button>

			<p v-for="(v,k) in errors" style="margin: 0 auto;margin-top: 20px;color: red;font-size: 18px;">

				{{v}}

			</p>

			<div style="margin-top: 60px;">

				<table class="table table-hover">

					<th><input type="checkbox" v-model="isCheck" @click="check()"></th>

					<th>编号</th>

					<th>手机号</th>

					<th>邮箱</th>

					<th>真实姓名</th>

					<th>操作</th>

					<tr v-for="(v,k) in user">

						<td><input type="checkbox" v-model="v.status"></td>

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

						<td>{{v.mobile}}</td>

						<td>{{v.email}}</td>

						<td>{{v.realname}}</td>

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

					</tr>

				</table>

				<button class="btn btn-danger" @click="checkAll()">全选</button>

				<button class="btn btn-danger" @click="checkNo()">全不选</button>

				<button class="btn btn-danger" @click="checkRev()">反选</button>

				<button class="btn btn-danger" @click="checkDel()">批量删除</button>

			</div>

		</div>

	</body>

</html>

<script>

	new Vue({

		el: "#app",

		data: {

			mobile: "",

			email: "",

			realname: "",

			errors: [],

			isCheck: false,

			user: [{

					id: 1,

					mobile: '18518393112',

					email: '123131@qq.com',

					realname: '邓超',

					status: false

				},

				{

					id: 2,

					mobile: '18518393000',

					email: '3322441@qq.com',

					realname: '杨幂',

					status: false

				}

			]

		},

		methods: {

			//添加

			add() {

				if (this.checkForm()) {

					//window.location.href = 'success.html'

					var obj = {

						id: this.user.length + 1,

						mobile: this.mobile,

						email: this.email,

						realname: this.realname,

						status: false

					}

					this.user.push(obj);

				}

			},

			//表单验证

			checkForm() {

				this.errors = [];

				if (this.mobile == '') {

					this.errors.push('手机号不能为空');

					return false;

				}

				var regMobile = /^1[35789]\d{9}$/;

				if (!regMobile.test(this.mobile)) {

					this.errors.push('手机号格式不正确');

					return false;

				}

				if (this.email == '') {

					this.errors.push('邮箱不能为空');

					return false;

				}

				var regEmail = /^\w{6,30}@\w{2,6}\.+(com|cn)$/;

				if (!regEmail.test(this.email)) {

					this.errors.push('邮箱格式为空');

					return false;

				}

				if (this.realname == '') {

					this.errors.push('真实姓名不能为空');

					return false;

				}

				var regRealname = /^[\u4e00-\u9fa5]{2,5}$/i;

				if (!regRealname.test(this.realname)) {

					this.errors.push('真实姓名格式不正确');

					return false;

				}

				if (this.errors.length == 0) {

					return true;

				} else {

					return false;

				}

			},

			//全选

			checkAll() {

				this.user.map(function(v, k) {

					v.status = true;

				});

			},

			//全不选

			checkNo() {

				this.user.map(function(v, k) {

					v.status = false;

				});

			},

			//反选

			checkRev() {

				this.user.map(function(v, k) {

					v.status = !v.status;

				});

			},

			//删除

			del(k) {

				this.user.splice(k, 1);

			},

			//批量删除

			checkDel() {

				var arr = [];

				this.user.map(function(v, k) {

					if (v.status == false) {

						arr.push(v);

					}

				});

				this.user = arr;

			},

			//点击复选框，全选/取消全选

			check() {

				if (this.isCheck == false) {

					this.user.map(function(v, k) {

						v.status = true;

					});

				} else {

					this.user.map(function(v, k) {

						v.status = false;

					});

				}

			}

		}

	});

</script>

sss

　　

js-表格的更多相关文章

  1. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  2. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  3. slickgrid 一个优秀的JS表格插件

    从熟悉JS以来,慢慢的喜欢上了这个门语言. 不自觉的,看了好多js的知识,可能也是因为做项目的原因吧. 这里稍微说下一个JS的grid插件 --slickgrid 了解这个插件也不是很多,稍微了解了下 ...

  4. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...

  5. 三.jquery.datatables.js表格编辑与删除

    1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

  6. JS表格分页组件：fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年）

    一.背景         之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...

  7. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

  8. JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）

    一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...

  9. JS表格排序

    var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...

  10. js 表格操作(兼容模式

    用insertRow,insertRow操作表格时,发现在谷歌浏览器中顺序和IE是反的 // 表格新增行 function addTableRow($id,$arr,$rowAttr){ var ta ...

随机推荐

  1. React凤凰项目规范

    技术资源 基础语法 ES6 TS 框架 React Redux React-redux React-Router UmiJS Dva 组件库 AntDesign AntV 构建编译 Webpack b ...

  2. synchronized类锁，对象锁，方法锁

    synchronized从语法的维度一共有3个用法: 静态方法加上关键字 实例方法(也就是普通方法)加上关键字 方法中使用同步代码块 前两种方式最为偷懒,第三种方式比前两种性能要好. synchron ...

  3. Eclipse项目上的红叉解决方案

    Eclipse项目上存在红叉,但是又不影响运行,同时展开项目未指明任何内容出错,可以按如下步骤进行处理: 0.查看Problems视图,定位错误,发现处理之: 1.检查Build Path中的各个依赖 ...

  4. IP分组和分片

    本文讨论两个问题①IP数据报的首部②IP数据报的分片 TCP/IP模型分为五层,从上到下依次是应用层.传输层.网络层.数据链路层和物理层. IP数据报是网络层的概念. IP数据报的首部 版本号:0~3 ...

  5. SQLServer误删ReportServerTempDB导致打不开其他库——解决方案

    无意间删除了ReportServerTempDB库和ReportServer 导致其他库连接不上 错误:报表服务器无法打开与报表服务器数据库的连接.所有请求和处理都要求与数据库建立连接. 解决方案: ...

  6. Solution -「ROI 2019」「LOJ #3192」课桌

    \(\mathcal{Description}\)   Link.   原题意足够简洁啦.( \(\mathcal{Solution}\)   乍一看比较棘手,但可以从座位的安排方式入手,有结论:   ...

  7. Solution -「LOCAL」ZB 平衡树

    \(\mathcal{Description}\)   OurOJ.   维护一列二元组 \((a,b)\),给定初始 \(n\) 个元素,接下来 \(m\) 次操作: 在某个位置插入一个二元组: 翻 ...

  8. 使用Sinopia部署私有npm仓库

    使用Sinopia部署私有npm仓库 [root@localhost ~]# hostnamectl set-hostname --static npm-server [root@npm-server ...

  9. tip7：CentOS8虚拟机安装相关总结

    使用工具:Win10家庭版.WM12Pro.CentOS8. 一.安装 之前使用虚拟机安装操作系统使用的都是OpenSuse,也有相关备份.但是在Win10家庭版上用不了,启动电脑蓝屏(可能某些硬件不 ...

  10. 使用 WebView2 封装一个生成 PDF 的 WPF 控件

    使用 WebView2 封装一个生成 PDF 的 WPF 控件 最近在迁移项目到 .net6,发现项目中用的 PDF 库不支持 .net6,于是想着换一个库.结果找了一大圈,发现不是版本不支持,就是收 ...