jQuery对JSON数组的简单排序

最新推荐文章于 2023-07-04 22:15:00 发布

aozhou9334

最新推荐文章于 2023-07-04 22:15:00 发布

阅读量537

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/linbudu/p/10909742.html

版权

<!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>

转载于:https://www.cnblogs.com/linbudu/p/10909742.html

aozhou9334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对JSON数组的简单排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
复制链接

扫一扫