TWaver HTML 5发布已有一段时间，使用的客户也是逐渐增加，
于是我也迫不及待地申请了一个试用版来写一个小网页，
最近正在写到数据查询，表格显示的功能。表格组件在HT ML 5中是提供的，
查看TWaver提供的Demo,表格的使用还是比较多的，
于是参考了其中的一个Demo，新建一个表格，并给表格赋值。
很快一张表格就生成了。
以下为案例,仅供参考!!!
html> < html lang= "en" > < head > < meta charset= "UTF-8" > < t IT le >第二周练习title> //导的js包 < script src= " Angular.js " >script> < script > VAR app = Angular .module( " ;m yApp" ,[]); app . controller ( "myCtrl" , function ($sco PE ) { $scope. cpzong = [ { id :80, n am e : "iphone" , money :5400 }, { id :1200, name : "ipad mini" , money :2200 }, { id :500, name : "ipad ai r" , money :2340 }, { id :29, name : "ipad" , money :1420 }, { id :910, name : "imac" , money :15400 } ]; $scope. sortFlag = "-" ; $scope. sortName = "name" ; // 定义排序功能 $scope.sort PR oducts = 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 (& # 39;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> 完毕
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5数据查询，表格显示功能代码教程 全部内容，希望文章能够帮你解决 html5教程-HTML5数据查询，表格显示功能代码教程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5数据查询，表格显示功能代码教程的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219339