Jquery添加和全部删除
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script type="text/javascript">
var app=angular.module("myapp",["ngRoute"]);
var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"},
{"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},
{"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}];
app.value("user",user);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/up",{
controller:"myctrl",
templateUrl:"up.html"})
.when("/add",{
controller:"myctrl",
templateUrl:"add.html"
});
}]);
app.controller("myctrl",function($scope,user,$location){
$scope.user=user;
$scope.del=function(){
$scope.user.splice($scope.user);
};
$scope.goToUrl=function(path){
$location.path(path);
};
$scope.goTourl=function(path){
$location.path(path);
};
$scope.dd=function(){
var usernew={id:$scope.id,
name:$scope.name,
pwd:$scope.pwd,
age:$scope.age,
sex:$scope.sex};
$scope.user.push(usernew);
};
var ii=0;
$scope.upp=function($index){
$scope.newpwdd=$scope.user[$index].pwd;
$scope.newname=$scope.user[$index].name;
ii=$index;
};
$scope.gmm=function(){
$scope.user[ii].pwd=$scope.newpwd;
};
});
</script>
<style>
.header{
width: 700px;
height: 50px;
}
.name{
margin-top: 10px;
}
.age{
margin-top: 10px;
}
.sex{
margin-top: 10px;
}
.add{
margin-top: 20px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div class="header">
用户名:<input type="text" class="name" ng-model="search" />
年龄：<input type="text" class="age" ng-model="searchone" />
性别：<select class="sex" ng-model="searchtwo">
<option></option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="del()">全部删除</button>
</div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.pwd}}</td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
<td>
<button ng-click="goToUrl('/up');upp($index)" >修改密码</button>
</td>
</tr>
</table>
<button class="add" ng-click="goTourl('/add')">添加用户</button>
<script type="text/ng-template" id="up.html">
<form action="#">
<table>
<tr>
<td>用户名: </td>
<td><input type="text" ng-model="newname" /></td>
</tr>
<tr>
<td>旧密码: </td>
<td><input type="text" ng-model="newpwdd" /></td>
</tr>
<tr>
<td>新密码:</td>
<td><input type="text" ng-model="newpwd" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" ng-click="gmm()" value="提交" />
</td>
</tr>
</table>
</form>
</script>
<script type="text/ng-template" id="add.html">
<form action="#">
<table>
<tr>
<td>id:</td>
<td><input type="text" ng-model="id" /></td>
</tr>
<tr>
<td>用户名:</td>
<td> <input type="text" ng-model="name" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" ng-model="pwd" /></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" ng-model="age" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" ng-model="sex" /><br /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<div ng-view> </div>
</center>
</body>
</html>
Jquery添加和全部删除的更多相关文章
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
- jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除
jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除
- 分别使用原生js和jQuery添加/删除元素的class属性
一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- jQuery添加删除
//代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
随机推荐
- 探究JVM和GC
1．Java堆中各代分布: 图1:Java堆中各代分布 Young:主要是用来存放新生的对象. Old:主要存放应用程序中生命周期长的内存对象. Permanent:是指内存的永久保存区域,主要存放C ...
- 团队作业2——需求分析&原型设计
Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...
- 线程高级篇-读写锁ReentrantReadWriteLock
转载原文:http://blog.csdn.net/john8169/article/details/53228016 读写锁: 分为读锁和写锁,多个读锁不互斥,读锁和写锁互斥,这是有JVM自己控制的 ...
- 201521123016 《Java程序设计》第2周学习总结
1. 本周学习总结 JAVA中string对象创建后不可修改. 使用StringBuilder编写代码,减少内存空间的占用. 字符串使用"+"拼接,拼接后其他类型会被转化为字符串. ...
- How To:禁用ubuntu全局菜单(global menu)的方法
刚从windows转过来的新手可用会觉得ubuntu unity下的全局菜单(global menu)用起来很不方便.下边是介绍去除全局菜单的方法 1.打开终端(可以去dash主页里面搜,也可以直接按 ...
- 201521123038 《Java程序设计》 第十周学习总结
201521123038 <Java程序设计> 第十周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题 ...
- 201521123059 《Java程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1.关系型数据库 --建立表格时表中一列中的数据类型必须一致.关系表中的行必须是唯一的,列是不可分的,某些行的某 ...
- 201521123027<java程序设计>第14周作业总结
1.本周作业总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2.书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己 ...
- wampserver启动不起来的原因？
如果没怎么动wamp的配置文件就发现wampserver启动不起来了,那么可能你碰到了iis服务器. 原因是apache的端口占用的是80,而iis的端口占用也是80所以造成了不能启动wampserv ...
- 13.Linux键盘驱动 (详解)
版权声明:本文为博主原创文章,未经博主允许不得转载. 在上一节分析输入子系统内的intput_handler软件处理部分后,接下来我们开始写input_dev驱动 本节目标: 实现键盘驱动,让开发板的 ...