全选批量删除添加查询

最新推荐文章于 2021-09-15 15:51:41 发布

Ermoji

最新推荐文章于 2021-09-15 15:51:41 发布

阅读量419

点赞数

本文链接：https://blog.csdn.net/ermoji/article/details/78610240

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title></title>
	<!--
	导入外部js、css
	-->
	<script src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"></script>
	<script src="js/angular.min.js"type="text/javascript"charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<style type="text/css">
	fieldset {
	padding: .35em .625em .75em;
	margin: 0 2px;
	border: 1px solid silver
	}

	legend {
	padding: .5em;
	border: 0;
	width: auto
	}
	</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
	姓名查询条件：<input type="text" id="name" />
	<select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()">
	</select>
	<br> 用户列表
	<br>
	<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
	<tr style="background: #999999;">
	<td><inputtype="checkbox"id="quan"ng-click="quan()" /></td>
	<td>姓名</td>
	<td>年龄</td>
	<td>拼音</td>
	<td>职位</td>
	<td>操作</td>
	</tr>
	<tr ng-repeat="person in persons">
	<td><inputtype="checkbox"class="myCb" /></td>
	<td>{{person.name}}</td>
	<td>{{person.age}}</td>
	<td>{{person.pinyin}}</td>
	<td>{{person.zhiwei}}</td>
	<td><ahref="#"ng-click="dele($index)">删除</a></td>
	</tr>
	</table>
	<input type="button" id="piliang" value="批量删除" ng-click="deleAll()" />
	<input type="button" id="cha" value="查询" ng-click="cha()" />
	<input type="button" id="add" value="添加用户" ng-click="show()" />
	<form id="f">
	<fieldset id="">
	<legend>添加用户信息</legend>
	姓名:<input type="text" name="name1" id="name1" /><br> 年龄:
	<input type="text" name="age" id="age" /><br> 拼音:
	<input type="text" name="pinyin" id="pinyin" /><br> 职位:
	<input type="text" name="zhiwei" id="zhiwei" /><br>
	<input type="button" value="保存" ng-click="save()" />
	</fieldset>

	</form>
	<!--
	逻辑代码
	-->
	<script type="text/javascript">
	//默认下面添加页面隐藏
	$("#f").hide();

	var m = angular.module("myApp", []);
	m.controller("myCtrl", function($scope) {

	//初始化数据
	$scope.persons = [{
	"name": "张三",
	"age": 20,
	"pinyin": "zhangsan",
	"zhiwei": "总经理"
	}, {
	"name": "李四",
	"age": 25,
	"pinyin": "lisi",
	"zhiwei": "副经理"
	}, {
	"name": "王五",
	"age": 22,
	"pinyin": "wangwu",
	"zhiwei": "工程师"
	}];
	//----------查询-----------
	$scope.cha = function() {

	//取值
	var name = $("#name").val();
	// alert(name)
	//判断
	if (name == "") {
	alert("请输入姓名");
	return;
	}
	//敏感词
	if (name.indexOf("奥") != -1) {
	alert("有敏感词");
	return;
	}
	var newPersons = [];
	//是否含有
	for (var i = 0; i < $scope.persons.length; i++) {
	var p = $scope.persons[i];
	if (p.name == name) {
	newPersons.push(p);
	}
	}
	//之后判断新的数组是否是为空
	if (newPersons.length == 0) {
	alert("没有匹配项");
	return;
	}
	$scope.persons = newPersons;
	}
	//---------查询结束-------

	//初始化下拉
	$scope.orders = ["按年龄正序排列", "按年龄倒序排列"];
	//change事件
	$scope.change = function() {

	var pai = $("#paixu").val();
	alert("dd" + pai)
	if (pai == "string:按年龄正序排列") {
	$scope.persons.sort(function(a, b) {
	if (a.age > b.age) {
	return 1;
	} else if (a.age < b.age) {
	return -1;
	}
	return 0;
	});
	} else {
	$scope.persons.sort(function(a, b) {
	if (a.age > b.age) {
	return -1;
	} else if (a.age < b.age) {
	return 1;
	}
	return 0;
	});
	}
	}
	//显示动画
	$scope.show = function() {
	$("#f").show(1000);
	}
	//save
	$scope.save = function() {
	//验证年龄
	var age = $("#age").val();
	var b = isNaN(age);
	if (b == true) { //如果不是一个数字就是 true
	alert("年龄格式不正确")
	return
	}
	//添加
	var name12 = $("#name1").val();
	var age = $("#age").val();
	var pinyin = $("#pinyin").val();
	var zhiwei = $("#zhiwei").val();
	var pe = {
	"name": name12,
	"age": age,
	"pinyin": pinyin,
	"zhiwei": zhiwei
	}; //创建ｐｅｒｓｏｎ对象
	$scope.persons.push(pe);
	//消失
	$("#f").hide();
	}
	//删除
	$scope.dele = function($index) {

	var c = confirm("是否确认删除？");
	if (c == true) {
	$scope.persons.splice($index, 1);
	}

	}
	//批量删除
	$scope.deleAll = function() {
	var b = confirm("是否确认删除？");

	if (b == true) {
	//获取选中的复选框
	var cbs = $("input[type=checkbox][class=myCb]:checked");
	//遍历，删除复选框所在行
	for (var i = 0; i < cbs.length; i++) {
	//取出每个复选框
	var cb = cbs[i];
	//删除所在行
	var tr = cb.parentNode.parentNode;
	tr.remove();
	}
	}

	}
	var flag = false;
	$scope.quan = function() {

	var cbs = $("input[type=checkbox]");
	if (flag == false) {
	for (var i = 0; i < cbs.length; i++) {
	var cb = cbs[i];
	cb.checked = true;
	}
	flag = true;
	} else {
	for (var i = 0; i < cbs.length; i++) {
	var cb = cbs[i];
	cb.checked = false;
	}
	flag = false;
	}

	}
	})
	</script>
	</body>

	</html>

Ermoji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选批量删除添加查询

charset="utf-8" /> 月考导入外部js、css --> src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"> src="js/angular.min.js"type="text/jav
复制链接

扫一扫