<!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指标数据进行排序)
猜你喜欢
转载自blog.csdn.net/qq_45404003/article/details/122106256
今日推荐
周排行