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 ...
随机推荐
- 集美大学网络1413第八次作业（团队四）-- 第一次项目冲刺（Alpha版本）成绩
首先非常抱歉,刚休完假,凌晨才回来,导致这么晚发布成绩,以后旅行可以考虑带点轻便点的笔记本~ O(∩_∩)O 第一次项目冲刺结束了,可以看出来,有的团队做的很棒,也有的团队组合不是很理想,导致进度一直 ...
- 201521123011 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 public ...
- 201521123077 《Java程序设计》第13周学习总结
1. 本周学习总结 1.1以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 介绍的传输层协议 : TCP 可靠:具有失败重传功能 开销较大:需要建立链路 需要维持传输中的关系 ...
- 201521123032 《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- 201521123115《java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...
- shell(sed/gawk)脚本（计算目录文件/验证电话号码/解析电子邮件地址）
1.计算目录文件 #!/bin/bash mypath=`echo $PATH | sed 's/:/ /g'`#注意` ` 和 ‘ ’ count= for directory in $mypath ...
- temp--达州银行
达州银行现场 服务器IP地址 192.168.1.234 ilink / ilink 自己电脑需要设置为固定IP 192.168.1.XXX 子网掩码 255.255.255.0 192.168.1. ...
- Java笔记—— 类与对象的几个例子
问题1 按要求编写java应用程序: 编写西游记人物类,属性有:身高,名字和武器.方法有:显示名字,显示武器. 在main方法中创建两个对象.猪八戒和孙悟空,并分别为他们的两个属性名字和武器赋值,最后 ...
- Android方法数不能超过65535
为什么方法数不能超过65535?搬上Dalvik工程师在SF上的回答,因为在Dalvik指令集里,调用方法的invoke-kind指令中,method reference index只给了16bits ...
- 初识 JShell
Java9 现在吵得热火朝天,赶紧顺势学习一波喽! JDK9 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk9-dow ...