根据不同的要求进行排序(ID，价格等)

最新推荐文章于 2024-11-04 11:45:09 发布

clqxmt

最新推荐文章于 2024-11-04 11:45:09 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： JS中的案例文章标签：根据不同的要求进行排序(ID，价格等)

本文链接：https://blog.csdn.net/weixin_43755513/article/details/100674203

JS中的案例专栏收录该内容

15 篇文章

订阅专栏

本文详细探讨了如何根据不同的需求，如ID和价格等字段，进行数据排序。通过实例讲解，展示了如何在编程中实现多条件排序，确保数据的正确展示和分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            margin:0; padding:0;
            /*letter-spacing:10px;*/
            /*line-height:20px;*/
        }
        div{
            width:100%; height:30px;
        }
        div span{
            padding:5px; font-size:14px; color:#555; float:left;
        }
        table{
            width:100%;
            text-align:center;
            border-spacing: 2px;
        }
       
    </style>
    <script type="text/javascript">
        var _data={
            title:["ID","name","price","sold","praise"],
            list:[{
                ID:20,name:"小米",price:"1000",sold:8000,praise:899
            },{
                ID:18,name:"华为",price:"2000",sold:8999,praise:5000
            },{
                ID:30,name:"苹果",price:"5000",sold:5000,praise:5000
            },{
                ID:31,name:"vivo",price:"1500",sold:2000,praise:1500
            },{
                ID:28,name:"oppo",price:"1300",sold:1000,praise:1000
            }]
        };
        function createDataRow(_data){
            //TODO:在空白处填写代码，根据JSON数据创建表格的列表
            var _table=document.getElementById("products");
            var _tr,_td;
            for(var i=0;i<_data.list.length;i++){
                _tr=document.createElement("tr");
                for(var n=0;n<5;n++){
                    _td=document.createElement("td");
                    _td.innerText=_data.list[i][_data.title[n]];
                    _tr.appendChild(_td);
                }
                _table.appendChild(_tr);
            }
        }
        function createTitleRow(_data){
            //TODO:在空白处填写代码，根据JSON数据创建表格的表头
            var _table=document.getElementById("products");
            var _tr=document.createElement("tr");
            _table.appendChild(_tr);
            var _th;
            for(var i=0;i<_data.title.length;i++){
                _th=document.createElement("th");
                _tr.appendChild(_th);

                _th.innerText=_data.title[i];
            }
        }
        function sort(_data,_field,_asc){//排序，参数可以自由删减
            var _empty=null;
            for(var n=0;n<_data.list.length;n++){
                for(var i=0;i<_data.list.length-1-n;i++){
                    if(_data.list[i][_field]*_asc>_data.list[i+1][_field]*_asc){
                        _empty=_data.list[i];
                        _data.list[i]=_data.list[i+1];
                        _data.list[i+1]=_empty;
                    }
                }
            }
        }

        function events(_data){
            var _products=document.getElementById("products");
            var _container=document.getElementsByTagName("div")[0];
            _container.children[0].onclick=function(){//根据ID升序
                _products.innerHTML="";
                sort(_data,"ID",1);
                createTitleRow(_data);
                createDataRow(_data);
            };
            _container.children[1].onclick=function(){//根据价格降序
                _products.innerHTML="";
                sort(_data,"price",-1);
                createTitleRow(_data);
                createDataRow(_data);
            };
            _container.children[2].onclick=function(){//根据销量升序
                _products.innerHTML="";
                sort(_data,"sold",1);
                createTitleRow(_data);
                createDataRow(_data);
            };
            _container.children[3].onclick=function(){//根据好评升序
                _products.innerHTML="";
                sort(_data,"praise",1);
                createTitleRow(_data);
                createDataRow(_data);
            };
        }
        function main(){
            createTitleRow(_data);
            createDataRow(_data);
            events(_data);
        }
        window.onload=main;

    </script>
</head>
<body>
<div>
    <span>根据ID升序排序</span>
    <span>根据price降序排序</span>
    <span>根据sold升序排序</span>
    <span>根据praise升序排序</span>
</div>
<table id="products">

</table>
</body>
</html>

在这里插入图片描述