html查询一张表,HTML5数据查询，表格显示功能代码教程

TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，

于是我也迫不及待地申请了一个试用版来写一个小网页，

最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，

查看TWaver提供的Demo,表格的使用还是比较多的，

于是参考了其中的一个Demo，新建一个表格，并给表格赋值。

很快一张表格就生成了。

以下为案例,仅供参考!!!

html>

第二周练习title>

//导的js包

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>

删除全部button>

产品编号th>

产品名称th>

产品价格th>

功能th>

tr>

{{goods.id}}td>

{{goods.name}}td>

{{goods.money}}td>

删除a>td>

tr>

table>

center>

body>

html>

完毕