<!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. CodeForces 540

    A. Combination Lock time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. HDU 2243 考研路茫茫——单词情结(AC自动机+DP+快速幂）

    题目链接 错的上头了... 这题是DNA的加强版,26^1 +26^2... - A^1-A^2... 先去学了矩阵的等比数列求和,学的是第二种方法,扩大矩阵的方法.剩下就是各种模板,各种套. #in ...

  3. android开发中fragment获取context

    在用到fragment时无法使用.this来指定当前context内容,android开发中fragment获取context,可以使用getActivity().getApplicationCont ...

  4. 使用express-generator初始化你的项目目录

    express 4.x以后将express命令独立到 express-generator包中,所以想使用express初始化项目目录,可以npm install express-genrator   ...

  5. C# 线程调用主线程中的控件

    由于项目的需要,最近几天一直在做串口和数据库.由于C#使用的时间不长,所以在编写代码和调试的过程中总是遇到意想不到的问题,比如在使用串口接收数据的时候,在接收数据事件中想把接收的数据放入一个textb ...

  6. js中addEventListener中第3个参数

    addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id=& ...

  7. Django model字段类型清单

    转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...

  8. [LintCode] Single Number 单独的数字

    Given 2*n + 1 numbers, every numbers occurs twice except one, find it. Have you met this question in ...

  9. JVM中，对象在内存中的布局

    在hotSpot虚拟机中,对象在内存中的布局可以分成对象头.实例数据.对齐填充三部分. 对象头:主要包括: 1.对象自身的运行行元数据,比如哈希码.GC分代年龄.锁状态标志等,这部分长度在32位虚拟机 ...

  10. 如何获取hibernate代理类代理的实际对象实例？

    在hibernate中,通过sql语句查询带clob字段的记录,查出来的结果集是List<HashMap<String,Object>>类型,在调用jackson的接口转为js ...