脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5数据查询，表格显示功能代码教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，
于是我也迫不及待地申请了一个试用版来写一个小网页，
最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，
查看TWaver提供的Demo,表格的使用还是比较多的，
于是参考了其中的一个Demo，新建一个表格，并给表格赋值。
很快一张表格就生成了。
以下为案例,仅供参考!!!
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二周练习title> //导的js包 <script src="angular.js">script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.cpzong = [ { id:80, name:"iphone", money:5400 }, { id:1200, name:"ipad mini", money:2200 }, { id:500, name:"ipad air", money:2340 }, { id:29, name:"ipad", money:1420 }, { id:910, name:"imac", money:15400 } ]; $scope.sortFlag = "-"; $scope.sortName = "name"; //定义排序功能 $scope.sortProducts = function (clomnName) { $scope.sortName = clomnName; if ($scope.sortFlag == "-"){ $scope.sortFlag = ""; }else{ $scope.sortFlag = "-"; } } //删除指定商品 $scope.deleteProduct = function (name) { for(index in $scope.cpzong){ if($scope.cpzong[index].name == name){ $scope.cpzong.splice(index,1); } } } //全部删除 $scope.deleteAll = function () { $scope.cpzong = null; } }); script> head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <input type="text" ng-model="serach" placeholder="产品名称" /> <button ng-click="deleteAll()">删除全部button><br/><br/> <table id="tab" border="1px" cellpadding="10px" cellspacing="0px"> <tr> <th ng-click="sortProducts('id')">产品编号th> <th ng-click="sortProducts('name')">产品名称th> <th ng-click="sortProducts('money')">产品价格th> <th>功能th> tr> <tr ng-repeat="goods in cpzong | filter:serach | orderBy:(sortFlag+sortName)"> <td>{{goods.id}}td> <td>{{goods.name}}td> <td>{{goods.money}}td> <td><a ng-click="deleteProduct(goods.name)">删除a>td> tr> table> center> body> html> 完毕
TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，
于是我也迫不及待地申请了一个试用版来写一个小网页，
最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，
查看TWaver提供的Demo,表格的使用还是比较多的，
于是参考了其中的一个Demo，新建一个表格，并给表格赋值。
很快一张表格就生成了。
以下为案例,仅供参考!!!
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二周练习title> //导的js包 <script src="angular.js">script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.cpzong = [ { id:80, name:"iphone", money:5400 }, { id:1200, name:"ipad mini", money:2200 }, { id:500, name:"ipad air", money:2340 }, { id:29, name:"ipad", money:1420 }, { id:910, name:"imac", money:15400 } ]; $scope.sortFlag = "-"; $scope.sortName = "name"; //定义排序功能 $scope.sortProducts = function (clomnName) { $scope.sortName = clomnName; if ($scope.sortFlag == "-"){ $scope.sortFlag = ""; }else{ $scope.sortFlag = "-"; } } //删除指定商品 $scope.deleteProduct = function (name) { for(index in $scope.cpzong){ if($scope.cpzong[index].name == name){ $scope.cpzong.splice(index,1); } } } //全部删除 $scope.deleteAll = function () { $scope.cpzong = null; } }); script> head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <input type="text" ng-model="serach" placeholder="产品名称" /> <button ng-click="deleteAll()">删除全部button><br/><br/> <table id="tab" border="1px" cellpadding="10px" cellspacing="0px"> <tr> <th ng-click="sortProducts('id')">产品编号th> <th ng-click="sortProducts('name')">产品名称th> <th ng-click="sortProducts('money')">产品价格th> <th>功能th> tr> <tr ng-repeat="goods in cpzong | filter:serach | orderBy:(sortFlag+sortName)"> <td>{{goods.id}}td> <td>{{goods.name}}td> <td>{{goods.money}}td> <td><a ng-click="deleteProduct(goods.name)">删除a>td> tr> table> center> body> html> 完毕
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-HTML5数据查询，表格显示功能代码教程全部内容，希望文章能够帮你解决html5教程-HTML5数据查询，表格显示功能代码教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。