频道栏目
首页 > 资讯 > HTML 5 > 正文

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

17-10-17        来源:[db:作者]  
收藏   我要投稿

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>

完毕

相关TAG标签
上一篇:Android开发UI模仿的超级课程表教程
下一篇:Cisco路由器VLan隔离局域网广播包配置实验及总结
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站