对表格(table)进行降序排列（按照表头thead指标数据进行排序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        #mian{
            width: 800px;
            margin:0 auto;
            border: 3px solid #abc123a1;
        }
        table{
            width: 100%;
            border:2px solid red;
            border-collapse:collapse;
        }

        td{
            border: 1px solid #000;
            border-left: none;
            text-align: center;
            height: 50px;
            vertical-align: middle;
        }
        tbody tr:nth-child(2n-1){
            background-color: #abc12366;
        }
        table tr td:last-child{
            border-right: none;
        }
        table tr:first-child td{
            border-top: none;
        }
        tbody tr:last-child td{
            border-bottom: none;
        }
        .paixu{
            position: relative;
            top: 3px;
            width: 23px;
        }
        thead tr td{
            font-size: 23px;
        }
        .paixuActive{
            transform: rotate(180deg);

        }
        .paixuActive+span{
            color: red;
        }
        thead tr td:not(:nth-child(1)){
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="mian">
        <table>
            <thead>
                <tr>
                    <td><span>地区</span></td>
                    <td><span>电信占比</span><img class="paixu paixuActive" src="./img/icon-paixu-01.png" alt=""></td>
                    <td><span>联通占比</span><img class="paixu" src="./img/icon-paixu-01.png" alt=""></td>
                    <td><span>差值</span><img class="paixu" src="./img/icon-paixu-01.png" alt=""></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>无锡</td>
                    <td>68.58%</td>
                    <td>31.42%</td>
                    <td>37.16%</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        let tableData = [
        { name:'武汉',wireProportion:67.38,UnicomProportion:32.62,differenceValue:34.76,id:'25' },
        { name:'襄阳',wireProportion:68.58,UnicomProportion:31.42,differenceValue:37.16,id:'510' },
        { name:'鄂州',wireProportion:66.27,UnicomProportion:33.73,differenceValue:32.54,id:'511' },
        { name:'孝感',wireProportion:54.23,UnicomProportion:45.77,differenceValue:8.46,id:'512' },
        { name:'黄冈',wireProportion:56.32,UnicomProportion:43.68,differenceValue:12.64,id:'513' },
        { name:'黄石',wireProportion:45.67,UnicomProportion:54.33,differenceValue:-8.66,id:'514' },
        { name:'咸宁',wireProportion:55.21,UnicomProportion:44.79,differenceValue:10.42,id:'515' },
        { name:'荆州',wireProportion:56.41,UnicomProportion:43.59,differenceValue:12.82,id:'516' },
        { name:'宜昌',wireProportion:57.61,UnicomProportion:42.39,differenceValue:15.22,id:'517' },
        { name:'恩施',wireProportion:52.19,UnicomProportion:47.81,differenceValue:4.38,id:'518' },
        { name:'十堰',wireProportion:46.87,UnicomProportion:53.13,differenceValue:-6.26,id:'519' },
        { name:'随州',wireProportion:51.08,UnicomProportion:48.92,differenceValue:2.16,id:'523' },
        { name:'荆门',wireProportion:87.21,UnicomProportion:23.13,differenceValue:-16.26,id:'527' },
        { name:'仙桃',wireProportion:53.32,UnicomProportion:73.13,differenceValue:-5.26,id:'527' },
        { name:'天门',wireProportion:68.98,UnicomProportion:66.13,differenceValue:-12.26,id:'527' },
        { name:'潜江',wireProportion:53.32,UnicomProportion:55.13,differenceValue:-1.26,id:'527' },
        { name:'林区',wireProportion:86.52,UnicomProportion:51.13,differenceValue:-6.26,id:'527' },
    ]
    function compare(propertyName) {
        return function(object1, object2) {
            var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if(value2 < value1){
                return -1;
            }else if(value2 > value1){
                return 1;
            }else{
                return 0;
            }
        }
    }
    $("table>thead>tr>td:not(:nth-child(1))").click(function(){
        $(this).siblings(`td:not(:nth-child(1))`).children().css({
            transform:`rotate(0deg)`,
            color:"#000"
        })
        $(this).children('img').css({
            transform:`rotate(180deg)`,
        })
        $(this).children('span').css({
            color:"red"
        })
        console.log($(this).children("span"))
        if($(this).index() == 1){
            tableData.sort(compare("wireProportion"));　
        }else if($(this).index() == 2){
            tableData.sort(compare("UnicomProportion"));
        }else if($(this).index() == 3){
            tableData.sort(compare("differenceValue"));
        }
        TableDataProcessing(tableData)

    })
    $('.duiBiaoTable>thead>tr>td:nth-child(2)>img').css({
        transform:`rotate(180deg)`
    })
    tableData.sort(compare("wireProportion"));
    function TableDataProcessing(arrData){
        let tableHtml = '';
        for(let item of arrData){
            tableHtml +=`
                <tr>
                    <td>${item.name}</td>
                    <td>${item.wireProportion}%</td>
                    <td>${item.UnicomProportion}%</td>
                    <td style=${item.differenceValue > 0 ? 'color:#06d162':'color:#ce000d' }>${item.differenceValue}%</td>
                </tr>
            `
        }
        $('table>tbody').html(tableHtml)
    }
    TableDataProcessing(tableData)
    </script>
</body>
</html>
对表格(table)进行降序排列（按照表头thead指标数据进行排序）

猜你喜欢
