<!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. Model Validation in ASP.NET Web API

    Model Validation in ASP.NET Web API 原文:http://www.asp.net/web-api/overview/formats-and-model-binding ...

  2. 【BZOJ2318】Spoj4060 game with probability Problem 概率

    [BZOJ2318]Spoj4060 game with probability Problem Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬 ...

  3. PHP-Redis扩展使用手册（四）

    /* 添加一个或者多个value到无顺序集合总,如果value已经成set中,则返回false * @param key set名称 * @param value * ... * @return in ...

  4. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  5. 【BZOJ】3993: [SDOI2015]星际战争

    题意 \(m\)个人\(n\)个物品,第\(i\)个物品生命值为\(A_i\),第\(i\)个人每秒可以减少一个物品\(B_i\)的生命值,给出一个\(m \times n\)的矩阵,如果\(i\)行 ...

  6. Python中的高级特性

    1.切片.使用“[”和“]”即可,类似Matlab,可以切list,tuple,字符串等. 2.迭代.Python内置的enumerate函数可以把一个list变成索引-元素对. 3.列表生成式.列表 ...

  7. 超链接a标签

    a: ---页面中锚点的链接: <a  href="#point"></a> <p id="#point">锚链接</ ...

  8. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  9. HDU 1892 See you~ (二维树状数组)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1892 See you~ Problem Description Now I am leaving h ...

  10. TranslateAnimation参数

    看TranslateAnimation动画参数,一直忘记四个参数意思: public    TranslateAnimation(float fromXDelta, float toXDelta, f ...