码迷,mamicode.com
首页 > 编程语言 > 详细

jQuery对JSON数组的简单排序

时间:2019-05-23 09:37:03      阅读:577      评论:0      收藏:0      [点我收藏+]

标签:min   image   device   foreach   ati   结构   pre   style   ini   

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <!-- 未经排序的 -->
    <table class = ‘grid-table‘ id="tablea" border="1">
        <tr>
            <th>员工工号</th>
            <th>员工姓名</th>
            <th>员工年龄</th>
        </tr>
    </table>
    <!-- 按员工工号排序 -->
    <table class = ‘grid-table‘ id="tableb" border="1">
        <tr>
            <th>员工工号</th>
            <th>员工姓名</th>
            <th>员工年龄</th>
        </tr>
    </table>
    <!-- 按员工年龄排序 -->
    <table class = ‘grid-table‘ id="tablec" border="1">
        <tr>
            <th>员工工号</th>
            <th>员工姓名</th>
            <th>员工年龄</th>
        </tr>
    </table>


</body>
<script>
    $(function(){
        var people = [
            {
                card_id:0001,
                name:p1,
                age:25
            },
            {
                card_id:0022,
                name:p2,
                age:22
            },
            {
                card_id:0004,
                name:p3,
                age:66
            }
        ];

        //$.each()是对数组,json和dom结构等的遍历,语法为$.each(arr,func)
        //而原生JS中则是[].forEach(function(value,index,array){
     //code something
        //   });
        //arr.forEach(function(value,index,array){
    // array[index] == value;    //结果为true
    // sum+=value;  
    // });
        $.each(people,function(index,value){
            $("#tablea").append(<tr><td> + value.card_id + 
                </td><td> + value.name +
                </td><td> + value.age + </td></tr>);
        });

        var card_id_people = people.sort(function(a,b){
            if(a.card_id < b.card_id){
                return -1;
            }else if(a.card_id > b.card_id){
                return 1;
            }else{
                return 0;
            };
        });
        console.log(card_id_people);
        $.each(card_id_people,function(index,value){
            $("#tableb").append(<tr><td> + value.card_id + 
                </td><td> + value.name +
                </td><td> + value.age + </td></tr>);
        });

        var age_people = people.sort(function(a,b){
            if(a.age < b.age){
                return -1;
            }else if(a.age > b.age){
                return 1;
            }else{
                return 0;
            };
        });
        console.log(age_people);
        $.each(card_id_people,function(index,value){
            $("#tablec").append(<tr><td> + value.card_id + 
                </td><td> + value.name +
                </td><td> + value.age + </td></tr>);
        });
    })
</script>
</html>

 

jQuery对JSON数组的简单排序

标签:min   image   device   foreach   ati   结构   pre   style   ini   

原文地址:https://www.cnblogs.com/linbudu/p/10909742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!