js-表格
<!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-表格的更多相关文章
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- slickgrid 一个优秀的JS表格插件
从熟悉JS以来,慢慢的喜欢上了这个门语言. 不自觉的,看了好多js的知识,可能也是因为做项目的原因吧. 这里稍微说下一个JS的grid插件 --slickgrid 了解这个插件也不是很多,稍微了解了下 ...
- JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
- 三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...
- JS表格分页组件：fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年）
一.背景 之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...
- js表格隔行换色和hover效果
<!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...
- JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）
一.背景 之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...
- JS表格排序
var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...
- js 表格操作(兼容模式
用insertRow,insertRow操作表格时,发现在谷歌浏览器中顺序和IE是反的 // 表格新增行 function addTableRow($id,$arr,$rowAttr){ var ta ...
随机推荐
- Java中class的前面添加public和不添加public有什么区别？
需要知道的是修饰类和变量的用来控制这个被修饰的类和变量的适用范围的修饰词有: 1.public:表示公开的类和变量,既所有的类都可以引入使用的. 2.protected:表示受保护的类,只有子孙类和本 ...
- Linux Makefile 生成 *.d 依赖文件及 gcc -M -MF -MP 等相关选项说明
1. 为什么要使用后缀名为 .d 的依赖文件? 在 Makefile 中, 我们的依赖关系可能需要包含一系列的头文件.比如main.c 源文件内容如下: #include "stdio.h& ...
- Visual Studio 下error C2471: 无法更新程序数据库
转载请注明来源:https://www.cnblogs.com/hookjc/ 解决方案:修改项目属性 右击项目 --> "属性" 1. "C/C++" ...
- Redis的配置文件redis.conf详解
Redis的配置文件位于redis的安装目录下,一般不要直接操作出厂设置的配置文件,需要对其进行备份.# Redis的配置文件样例: # Redis configuration file exampl ...
- Keepalived配置与使用(1)
介绍 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.一个WEB服务至少会有2台服务器运行Keepalived,一台为主服务器(MASTER),一台为 ...
- Nginx的优化与防盗链
Nginx的优化与防盗链 1.隐藏版本号 2.修改用户与组 3.缓存时间 4.日志切割 5.连接超时 6.更改进程数 7.配置网页压缩 8.配置防盗链 9.fpm参数优化 1.隐藏版本号: 可以使用 ...
- Kubernetes GitOps 工具
Kubernetes GitOps Tools 译自:Kubernetes GitOps Tools 本文很好地介绍了GitOps,并给出了当下比较热门的GitOps工具. 简介 在本文中,将回顾一下 ...
- 基于TI DSP TMS320C6678、Xilinx K7 FPGA XC7K325T的高速数据处理核心板
一.板卡概述 该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6678和一片Xilinx FPGA K7 XC72K325T-1ffg900.包含1个千兆网口 ...
- 【论文考古】Training a 3-Node Neural Network is NP-Complete
今天看到一篇1988年的老文章谈到了训练一个简单网络是NPC问题[1].也就是下面的网络结构,在线性激活函数下,如果要找到参数使得输入数据的标签估计准确,这个问题是一个NPC问题.这个文章的意义在于宣 ...
- MyBatis功能点一：二级缓存cache
对于Mybatis缓存分作用域等维度区别一.二级缓存特点如下图: 分析缓存源码首先得找到缓存操作的入口:前面已经分析,sqlsesion.close()仅对一级缓存有影响,而update等对一/二级缓 ...