<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.add{
position:relative;
top:-40px;
left:1000px;
}
</style>
</head> <body>
<div ng-app="myapp" ng-controller="myCtrl">
<h2>管理信息:</h2><br>
<p>搜索:<input type="text" placeholder="请输入关键字" ng-model="test"></p>
<button class="btn btn-primary add" ng-click="add()">添加</button>
<table class="table table-bordered" style="text-align: center">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in texts | filter:test">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.city}}</td>
<td>
<button class="btn btn-warning"" ng-click="update($index)">修改</button>&nbsp;
<button class="btn btn-danger" ng-click="del($index)">删除</button>
</td>
</tr>
</tbody>
</table> <!-- 添加信息 -->
<div class="modal" id="modal-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">添加信息</h3>
</div> <div class="modal-body">
<div>姓名:</div>
<input ng-model="newName" type="text">
<div>年龄:</div>
<input ng-model="newAge" type="text">
<div>城市:</div>
<input ng-model="newCity" type="text">
</div> <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-success" ng-click="save()">保存</button>
</div> </div> </div> </div> <!-- 修改信息 -->
<div class="modal" id="modal-2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">修改信息</h3>
</div> <div class="modal-body">
<div>姓名:</div>
<input ng-model="prod.name" value="{{prod.name}}" type="text">
<div>年龄:</div>
<input ng-model="prod.age" value="{{prod.age}}" type="text">
<div>城市:</div>
<input ng-model="prod.city" value="{{prod.city}}" type="text">
</div> <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-success" ng-click="ensure()">确定</button>
</div> </div> </div> </div>
</div> <script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myCtrl',function($scope){
//定义表格内容
$scope.texts = [
{name:"张三",age:"23",city:"海南"},
{name:"李四",age:"25",city:"香港"},
{name:"王五",age:"25",city:"济南"},
{name:"刘六",age:"22",city:"济南"},
{name:"李七",age:"35",city:"烟台"},
{name:"张八",age:"32",city:"聊城"},
{name:"吕九",age:"30",city:"盘锦"}
];
//定义一个空对象,用于保存和修改数据时临时存储
$scope.prod = {};
//定义一个单击删除按钮时触发的事件,用于删除选中行
$scope.del = function ($index) {
if($index>=0){
if(confirm("是否删除"+$scope.texts[$index].name) ){
$scope.texts.splice($index,1);
}
}
}; //定义一个全局变量idx,用于存储选中行的索引,方便执行保存操作。idx取值为0、1、、、、都有用,所以暂取值为-1;
var idx = -1;
//定义一个点击添加按钮时触发的事件,用于新增数据
$scope.add = function(){
//显示bootstrap中的模块窗口
$('#modal-1').modal('show'); };
//定义一个点击保存按钮时触发的事件
$scope.save = function(){
//将添加的值赋给数组
$scope.texts.name = $scope.newName;
$scope.texts.age = $scope.newAge;
$scope.texts.city = $scope.newCity;
$scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});
//关闭模块窗口
$('#modal-1').modal('hide');
}; //定义一个点击修改按钮时出发的事件,用于修改数据
$scope.update = function($index){
//显示bootstrap中的模块窗口
$('#modal-2').modal('show'); //将选中行的数据绑定到临时对象prod中,在下面的模态窗口中展示出来
$scope.prod.name = $scope.texts[$index].name;
$scope.prod.age = $scope.texts[$index].age;
$scope.prod.city = $scope.texts[$index].city;
//选中行的索引赋值给全局变量idx
idx = $index;
}; //定义一个点击确定按钮时触发的事件,
$scope.ensure = function () {
//将修改后的值赋给数组
$scope.texts[idx].name = $scope.prod.name;
$scope.texts[idx].age = $scope.prod.age;
$scope.texts[idx].city = $scope.prod.city;
//关闭模块窗口
$('#modal-2').modal('hide');
}; });
</script>
</body>
</html>

用AngularJS实现对表格的增删改查(仅限前端)的更多相关文章

  1. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  2. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

  3. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  4. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  5. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  6. Angularjs中表格的增删改查

    在一个管理系统中,不外乎都是增删改查.现在比如有个表格,我想修改当前行的数据,如下图所示 一点击修改的时候,当前页面我需要修改的数据,变成能修改的样式,点击保存能保存当前修改的数据,如下图所示 需要引 ...

  7. 快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...

  8. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  9. appendChild简单表格的增删改查

    ---恢复内容开始--- <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><hea ...

随机推荐

  1. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  2. Python 项目实践三(Web应用程序)第三篇

    接着上节的继续学习,现在要显示所有主题的页面 有了高效的网页创建方法,就能专注于另外两个网页了:显示全部主题的网页以及显示特定主题中条目的网页.所有主题页面显示用户创建的所有主题,它是第一个需要使用数 ...

  3. Vue 爬坑之路(三)—— 使用 vue-router 跳转页面

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...

  4. [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...

  5. ts中interface与class的区别

    interface -- 接口只声明成员方法,不做实现. class -- 类声明并实现方法. 那么接口有什么用呢?设想如下需求: 要实现一个print函数,它将传入的对象打印出来.在实际实现上,它将 ...

  6. css布局--水平居中

    一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...

  7. ArcGis连接oracle失败:ORA-6413:连接未打开

    问题: 通过ARCMap 添加Oracle数据库连接时提示,ORA-6413:连接未打开. 运行环境: ArcGis 10.2 Oracle 10g 解决方法: 通过上网查找解决方法,网友说" ...

  8. Python多线程编程(第二篇)

    一.Python中的上下文管理器(contextlib模块) 上下文管理器的任务是:代码块执行前准备,代码块执行后收拾 1.如何使用上下文管理器: 如何打开一个文件,并写入"hello wo ...

  9. Chris Richardson微服务翻译:微服务介绍

    作者简介:Chris Richardson,世界著名的软件架构师,经典著作<POJOS IN ACTION>的作者,cloudfoundry.com 的创始人 微服务目前正受到大量的关注, ...

  10. jetty和tomcat的区别

    jetty:是一个开源的servlet容器,基于java的web容器,例如给jsp和servlet提供运行环境,jetty是使用java编写的,他的api是一组以jar包的形式发布,开发人员可以将je ...