<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>退费</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js'></script>
</head>
<style>
.container {
width: 1200px;
margin: 150px auto;
font-size: 16px;
text-align: center;
}

.container table {
width: 100%;
}

.container table tr th,
.container table tr td {
padding: 10px;
}

.container table tr td input[type=checkbox] {
width: 20px;
height: 20px;
cursor: pointer;
}

.deleteAll {
float: right;
margin: 20px;
}

.addList input[type=text] {
border: 1px solid #999;
text-indent: 5px;
font-size: 14px;
padding: 5px;
}
</style>

<body>
<div id='test' class="container">
<table border="1">
<tr>
<th>
<button v-on:click='selectedAll'>全选</button>
</th>
<th>id</th>
<th>描述</th>
<th>删除</th>
</tr>
<tr v-for='tr in trArr'>
<td>
<input type="checkbox" v-model="selected" v-bind:value='tr.td1' />
</td>
<td>{{tr.td2}}</td>
<td>{{tr.td3}}</td>
<td>
<button v-on:click='removeTr($index)'>删除</button>
</td>
</tr>
</table>
<span>{{selected|json}}</span>
<button class="deleteAll" v-on:click='removeAll'>全部删除</button>
<button class="deleteAll" v-on:click='multipleSelected1'>选中删除</button>
<button class="addTr deleteAll" @click='showAdd'>{{addL}}</button>
<div class="addList" v-show='showT'>
<input type="text" v-model='addTd1' placeholder='请输入内容'>
<input type="text" v-model='addTd2' placeholder='请输入内容'>
<input type="text" v-model='addTd3' placeholder='请输入内容'>
<button @click='addList'>确定添加</button>
</div>
</div>
</body>

</html>
<script>
var vm = new Vue({
el: '#test',
data: {
addTd1: '',
addTd2: '',
addTd3: '',
addL: '添加',
showT: false,
trArr: [{
td1: '44',
td2: '4545245',
td3: '描述',
td4: ''
}, {
td1: '32',
td2: '454dsds5245',
td3: '描述1',
td4: '<button>删除</button>'
}, {
td1: '76767',
td2: '454dsds5245',
td3: '描述1',
td4: '<button>删除</button>'
}],
selected: []
},
methods: {
removeTr: function(index) {
this.trArr.splice(index, 1);
},
selectedAll: function() {
//this.selected=this.selected==false?true:false;
if (this.selected.length != this.trArr.length) {
this.selected = [];
for (var i = 0; i < this.trArr.length; i++) {
this.selected.push(this.trArr[i].td1);
}
} else {
this.selected = [];
}
},
removeAll: function(e) {
if (this.selected.length <= 0) {
return false;
} else if (this.selected.length == this.trArr.length) {
this.trArr = [];
this.selected=[];
}
},
multipleSelected: function(e) {
var arr = [];
for (var i = 0; i < this.trArr.length; i++) {
//arr.push(this.trArr[i].td1)
for (var j = 0; j < this.selected.length; j++) {
if (this.trArr[i].td1 == this.selected[j]) {
arr.push(i)
}
}
}
return arr
},
multipleSelected1:function(){
var multipleSelected=this.multipleSelected().reverse();
console.log(multipleSelected)
for(var i=0;i<multipleSelected.length;i++){
this.trArr.splice(multipleSelected[i],1);
}
this.selected=[];
return console.log(this.trArr);
},
addList: function() {
if (this.addTd1 == '' || this.addTd2 == '' || this.addTd3 == '') {
alert('请输入完整内容')
return false;
} else {
this.trArr.push({
td1: this.addTd1,
td2: this.addTd1,
td3: this.addTd2,
td4: 'wewe'
});
}

this.addTd1 = '';
this.addTd2 = '';
this.addTd3 = '';
},
showAdd: function() {
this.showT = this.showT == false ? true : false;
}
}
})
</script>

vue.js 批量删除跟全选，反选效果的更多相关文章

  1. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  2. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  3. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  4. 使用vue.js实现checkbox的全选和多个的删除功能

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  5. 分别用js和jq实现百度全选反选效果

    js实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. asp gridview批量删除和全选

    本人新手刚学asp.net   全选和删除也是引用了他人的代码试了一试可以实现,感觉很好,就发了上来. 前台代码 <asp:GridView ID="GridView1" r ...

  7. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  8. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  9. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

随机推荐

  1. SQL注入攻防入门详解（2）

    SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...

  2. Javascript/jQuery根据页面上表格创建新汇总表格

    任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...

  3. 将公司的主要项目从eclipse迁移到android studio for mac环境（2）

    1.将eclipse 的 代码迁移到android studio的过程中,现在已经有了一个未优化版本能够在android studio使用,这时候,只需要将已优化版本的代码中的libs  res  s ...

  4. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  5. 团队作业week9 scenario testing

    1.How do you expect different personas to use your software? What’s their need and their goals,  how ...

  6. Vuforia图像追踪，动态创建的对象隐藏显示的坑

    刚做的一个项目,使用Unity3D的Vuforia插件进行图像识别,其中有动态生成的游戏对象模型,地形模型放在ImageTarget下,作为ImageTarget的子物体. 动态生成的敌人则有Pref ...

  7. 谢欣伦 - OpenDev原创教程 - 网络设备查找类CxNetworkHostFind & CxNetworkAdapterFind

    这是一个精练的网络设备查找类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxNetworkHostFind的使用如下: void ...

  8. Glide加载图片到自定义的圆形ImageView中不显示

    当使用自定义的圆形ImageView时,发现使用Glide加载并设置默认初始图片时,自定义的ImageView一直显示默认图片,无法更新到加载的图片. 使用下面代码可以解决这个问题 Glide.wit ...

  9. kafka模块概述

    简介 kafka主要用于实现低延迟的发送和收集大量的事件和日志数据--通常是活跃的数据(PV.访问记录等),数据以日志形式记录下来,然后由一个专门的系统来进行日志的收集与统计: 吞吐量极高的分布式消息 ...

  10. Sql Server海量数据插入

    目录 1.前言 2.BULK INSERT 3.简单示例 前言 由于昨天接到一个客户反馈导出数据卡死的问题,于是决定今天模拟一下千万级的数据,然后傻傻的等待插入数据了半天...... 对于海量数据,上 ...