表格简单的查找+删除
来源:互联网 发布:悠悠虚拟乐队软件 编辑:程序博客网 时间:2024/06/06 01:26
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { border-collapse: collapse; } td, th { width: 200px; border: 1px solid gainsboro; text-align: center; padding: 20px; } button { width: 100px; height: 40px; background: orange; color: white; border: 0px; border-radius: 5px; } .search { background: ghostwhite; border: 1px solid gainsboro; border-radius: 5px; width: 1450px; height: 50px; line-height: 50px; margin-bottom: 10px; } .search input { width: 200px; height: 30px; color: #999; border-radius: 5px; margin-left: 20px; border: 1px solid gainsboro; } .search button { float: right; margin-top: 5px; margin-right: 10px; background: red; } .active { color: red; } </style> <script src="angular-1.3.0.js"></script> <script> var data = [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10}, {"id": 1244, "name": 'aphone', "price": 6400, "count": 100}, {"id": 1334, "name": 'mypad', "price": 4400, "count": 20}, {"id": 8234, "name": 'zpad', "price": 8400, "count": 130}, ]; var myapp = angular.module("myapp", []); myapp.controller("myCtrl", function ($scope) { $scope.data = data; //设置页面默认显示 $scope.show = true; //设置checkbox默认不选中 $scope.chk = false; $scope.xuanz = false; $scope.check = function (val) { /*判断是否选中,然后控制下方的是否选中*/ if (val) { $scope.xuanz = true; } else { $scope.xuanz = false; } } $scope.search; /*删除按钮*/ $scope.remove = function (index) { /*判断是否确认删除*/ var b = confirm("确认删除"); if (b) { $scope.data.splice(index, 1); } } $scope.del = function () { /*判断是否确认删除*/ if ($scope.xuanz || $scope.checkD) { var b = confirm("确认删除"); if (b) { //删除所有商品信息 if ($scope.chk) { $scope.data.splice(0, $scope.data.length); //让商品信息管理页面为空白界面 $scope.show = false; } else { for (var i = $scope.xuan1.length - 1; i >= 0; i--) { console.log($scope.xuan1[i]); for (var j = 0; j < $scope.data.length; j++) { console.log($scope.data[j].id == $scope.xuan1[i]); if ($scope.data[j].id == $scope.xuan1[i]) { $scope.data.splice(j, 1); } } } } } } else { alert("先进行选中要删除的商品信息"); } } $scope.checkD = false; $scope.xuan1 = []; $scope.xuan = function (xuanl, id) { console.log(id); $scope.checkD = xuanl; if (xuanl) { $scope.xuan1.push(id); } } }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><div class="search"> <input type="text" placeholder="输入关键字…" ng-model="search"> <button ng-click="del()">批量删除</button></div><table ng-show="show"> <thead> <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th> <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th> <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th> <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th> <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th> <th>数据操作</th> </thead> <tbody> <tr ng-repeat="item in data| filter:search"> <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td> <td>{{item.id}}</td> <td> {{item.name}}</td> <td>{{item.price | currency:"¥"}}</td> <td>{{item.count}}</td> <td> <button ng-click="remove($index)">删除</button> </td> </tr> </tbody></table></body></html>
阅读全文
0 0
- 表格简单的查找+删除
- anduraljs的表格删除和查找关键字
- 简单表格删除
- Javascrpit mvc 简单的增添删除查找
- Jquery实现简单的表格添加、编辑、删除教程
- Jquery实现简单的表格添加、编辑、删除教程
- js简单的表格添加行和删除行操作.
- 一个简单的jQuery例子,动态添加表格和删除
- 简单的jquery动态操作表格增加,删除!
- 简单二叉排序树/二叉查找树的构建插入删除操作
- 二叉查找树的插入和删除简单实现
- 前端框架Easey UI(二)表格控件的查找与删除操作消息提示对话框
- angular的添加查找表格
- 超级简单Table表格添加,删除行
- 字符串的查找删除
- 二叉排序树的查找删除
- 字符串的查找删除
- 一个简单的表格
- 何恺明!再斩ICCV 2017最佳论文
- 四种古典密码的C++实现(2)-----Virginia密码
- 关于AI与高性能计算加速融合,这里有英伟达最新的4个应用案例
- AI芯片再起风云!深鉴获4千万美元投资,蚂蚁金服和三星风投领投
- 吴韧谈异构智能芯片:比谷歌能耗低,比华为寒武纪计算力高
- 表格简单的查找+删除
- 李向阳教授谈中科大AI承继与挑战,IT校友影响力惊人
- Linux下的压缩zip,解压缩unzip命令详解及实例
- 百度悄然发布Deep Vioce 3
- 使用Android GPS api 实现一个轨迹记录的小功能
- 多线程编程(一)
- 区间问题
- org.apache.http.ProtocolException: Target host is not specified
- 四种古典密码的C++实现(3)-----Playfair密码