用AngularJS实现对表格的增删改查（仅限前端），具体代码：
<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">
<script type="text/javascript" src="js/jquery-1.11.1.js"> <script type="text/javascript" src="js/bootstrap.js"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
搜索： <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 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> <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:"王五",city:"济南"},{name:"刘六",age:"22",{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'); }; }); 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。 增删改查表格表格 相关推荐 哪些JavaScript IDE最好用？ 阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充 异步编程之Javascript Promises 规范介绍 Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。 超越Web，Javascript在物联网的应用 引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨 JavaScript 常用功能总结 小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面 微软Edge 内嵌的JavaScript 引擎即将开源 微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优 1000多个项目中的十大JavaScript错误以及如何避免 通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。 TypeScript VS JavaScript 深度对比 TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？ 2017年 JavaScript 框架回顾 -- 后端框架 本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。 JavaScript 开发人员需要知道的简写技巧 本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 前端开发者常用的9个JavaScript图表库 对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。 顶级的JavaScript框架、库、工具及其使用 几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS 一张图告诉你最流行的 7 个 JavaScript框架特点 AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基 1分钟选好最合适你的JavaScript框架 Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如 2017年 JavaScript 框架回顾 -- 前端框架 对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。 SpreadJS使用进阶指南 前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已 2017年 JavaScript 框架回顾 -- React生态系统 前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。 ES2017异步函数现已正式可用 ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。 Top 10 JavaScript编辑器，你在用哪个？ 本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。 JavaScript中的内存泄漏以及如何处理 随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。 JavaScript 性能优化技巧分享 JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开 分类导航 热门文章 • 哪些JavaScript IDE最好用？• 异步编程之Javascript Promises 规范介…• 超越Web，Javascript在物联网的应用• JavaScript 常用功能总结• 微软Edge 内嵌的JavaScript 引擎即将开…• 1000多个项目中的十大JavaScript错误以…• TypeScript VS JavaScript 深度对比• 2017年 JavaScript 框架回顾 -- 后端框…• JavaScript 开发人员需要知道的简写技巧• 前端开发者常用的9个JavaScript图表库 最新文章 • 哪些JavaScript IDE最好用？• 异步编程之Javascript Promises 规范介…• 超越Web，Javascript在物联网的应用• JavaScript 常用功能总结• 微软Edge 内嵌的JavaScript 引擎即将开…• 1000多个项目中的十大JavaScript错误以…• TypeScript VS JavaScript 深度对比• 2017年 JavaScript 框架回顾 -- 后端框…• JavaScript 开发人员需要知道的简写技巧• 前端开发者常用的9个JavaScript图表库 热门标签更多 pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot
<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 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>
<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:"王五",city:"济南"},{name:"刘六",age:"22",{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'); };
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
