HTML5数据查询，表格显示功能代码教程
导读：收集整理的这篇文章主要介绍了html5教程-HTML5数据查询，表格显示功能代码教程，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 TWaver...
收集整理的这篇文章主要介绍了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教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5数据查询，表格显示功能代码教程
本文地址： https://pptw.com/jishu/587186.html