今天来写个简单的数组排序,先把比较冗余的代码写出来,然后再把简洁的代码写出来。
其实我们在排序时是根据字段里的某些数值来排序(可能我说的不准确,但先就这么理解),所以需要先把那些具有对比性的内容获取出来,然后再进行对比。
这里的例子我用一个表格来做说明,具体的思路可以分为几个步骤:
获取–赋值–排序–添加–调用
1. 获取表格里的tbody,方便往里面添加排好序的tr
2. 获取行trs,此时trs还不是数组(是类数组对象),所以要使用循环将每一行的值赋值给新的数组
arr[i] = trs[i]
3. 紧接着就可以对新的数组进行排序的操作 arr.sort(function(t1, t2){})
4. 在排序操作里面需要两个参数,个人认为:这两个参数可以代表新数组里需要比较的项
5. 获取项里面需要做比较的内容(可对内容进行处理以获得精准内容),比如:
var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
6. 再接着就是:
升序:return n1 - n2;
降序:return n2 - n1;
7. 循环排好序的数组,将每一项添加到tbody里面即可
addToTbody();
8. 调用方法
btn4.click(function(){
s_tab();// 排序方法
addToTbody(); //添加到tbody
})
上代码(html代码):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组对象排序</title>
<style>
.sx, .jx{background-color:#5FAFF7;outline: none;cursor: pointer;border:none;}
.backgroundColorEA5F5D{background-color:#EA5F5D;}
.backgroundColor5FAFF7{background-color:#5FAFF7;}
.btn_box{margin-top:30px;}
</style>
</head>
<body>
<table id="tab1">
<thead>
<tr>
<th>发货物流</th>
<th>运输时效</th>
<th>预估运费</th>
</tr>
</thead>
<tbody>
<tr>
<td>ePacket-燕文揽收</td>
<td>7-20个工作日</td>
<td>¥ 85.93</td>
</tr>
<tr>
<td>TNT Global express(TNT全球)</td>
<td>2-6个工作日</td>
<td>¥ 200.06</td>
</tr>
<tr>
<td>ePacket-莆田揽收</td>
<td>7-20个工作日</td>
<td>¥ 84.33</td>
</tr>
<tr>
<td>SF eParcel(顺丰国际)</td>
<td>7-12个工作日</td>
<td>¥ 85.93</td>
</tr>
<tr>
<td>DHL-HK(香港DHL)</td>
<td>3-8个工作日</td>
<td>¥ 120.35</td>
</tr>
<tr>
<td>TNT Global express(TNT全球)</td>
<td>5-6个工作日</td>
<td>¥ 162.35</td>
</tr>
<tr>
<td>FEDEX_IP(FedEx优先型)</td>
<td>3-8个工作日</td>
<td>¥ 374.06</td>
</tr>
<tr>
<td>TNT Global express(TNT全球)</td>
<td>3-8个工作日</td>
<td>¥ 50.06</td>
</tr>
</tbody>
</table>
<div class="btn_box">
<button class="sx" id="btn1">运费升序排列</button>
<button class="jx" id="btn2">运费降序排列</button>
</div>
<div class="btn_box">
<button class="sx" id="btn3">时效升序排列</button>
<button class="jx" id="btn4">时效降序排列</button>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
</body>
</html>
上代码(js代码,这是比较冗余的代码,看起来思路比较清晰):
var
btn1 = $("#btn1"),
btn2 = $("#btn2"),
btn3 = $("#btn3"),
btn4 = $("#btn4"),
trs = $("tbody>tr"),
tbody = $("table>tbody"),
pre_arr = [],
pric_arr = [];
// 将非数组性质的trs赋值给数组pric_arr
function trsTo_Pric_arr(){
for(var i=0;i<trs.length;i++){
pric_arr[i] = trs[i];
}
}
// 将非数组性质的trs赋值给数组pre_arr
function trsTo_Pre_arr(){
for(var i=0;i<trs.length;i++){
pre_arr[i] = trs[i];
}
}
// 运费升序排列
function y_tabs(){
trsTo_Pric_arr();
pric_arr.sort(function(t1,t2){
var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
return n1 - n2;
})
}
// 运费降序排列
function y_tabj(){
trsTo_Pric_arr();
pric_arr.sort(function(t1,t2){
var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
return n2 - n1;
})
}
// 时效升序排列
function s_tabs(){
trsTo_Pre_arr();
pre_arr.sort(function(t1,t2){
var str1 = t1.cells[1].innerHTML;
var str2 = t2.cells[1].innerHTML;
var n1 = str1.substring(0,str1.length-4).replace("-", "");
var n2 = str2.substring(0,str2.length-4).replace("-", "");
return n1 - n2;
})
}
// 时效降序排列
function s_tabj(){
trsTo_Pre_arr();
pre_arr.sort(function(t1,t2){
var str1 = t1.cells[1].innerHTML;
var str2 = t2.cells[1].innerHTML;
var n1 = str1.substring(0,str1.length-4).replace("-", "");
var n2 = str2.substring(0,str2.length-4).replace("-", "");
return n2 - n1;
})
}
// 将排列好顺序的运费tr添加到tbody里
function addPricToTbody(){
for(var i=0;i<pric_arr.length;i++){
tbody.append(pric_arr[i]);
}
}
// 将排列好顺序的时效tr添加到tbody里
function addPreToTbody(){
for(var i=0;i<pre_arr.length;i++){
tbody.append(pre_arr[i]);
}
}
// 点击btn1运费进行升序排列
btn1.click(function(){
y_tabs();
addPricToTbody();
})
// 点击btn2运费进行降序排列
btn2.click(function(){
y_tabj();
addPricToTbody();
})
// 点击btn3时效进行升序排列
btn3.click(function(){
s_tabs();
addPreToTbody();
})
// 点击btn4时效进行降序排列
btn4.click(function(){
s_tabj();
addPreToTbody();
})
上代码(js代码,这是比较简洁的代码):
$(function(){
var
btn1 = $("#btn1"),
btn2 = $("#btn2"),
btn3 = $("#btn3"),
btn4 = $("#btn4"),
trs = $("tbody>tr"),
tbody = $("table>tbody"),
pre_arr = [],
pric_arr = [];
// 将非数组性质的trs赋值给新数组
function trsTo_New_arr(type_arr){
for(var i=0;i<trs.length;i++){
type_arr[i] = trs[i];
}
}
// 运费排序
function y_tab(f){
trsTo_New_arr(pric_arr);
pric_arr.sort(function(t1,t2){
var n1 = t1.cells[2].innerHTML.substring(2).replace(".", "");
var n2 = t2.cells[2].innerHTML.substring(2).replace(".", "");
return f*(n1 - n2);
})
}
// 时效排序
function s_tab(f){
trsTo_New_arr(pre_arr);
pre_arr.sort(function(t1,t2){
var str1 = t1.cells[1].innerHTML;
var str2 = t2.cells[1].innerHTML;
var n1 = str1.substring(0,str1.length-4).replace("-", "");
var n2 = str2.substring(0,str2.length-4).replace("-", "");
return f*(n1 - n2);
})
}
// 将排列好顺序的tr添加到tbody里
function addToTbody(type_arr){
for(var i=0;i<type_arr.length;i++){
tbody.append(type_arr[i]);
}
}
// 点击按钮运费进行升序排列
btn1.click(function(){
y_tab(1);
addToTbody(pric_arr);
})
// 点击按钮运费进行降序排列
btn2.click(function(){
y_tab(-1);
addToTbody(pric_arr);
})
// 点击按钮时效进行升序排列
btn3.click(function(){
s_tab(1);
addToTbody(pre_arr);
})
// 点击按钮时效进行降序排列
btn4.click(function(){
s_tab(-1);
addToTbody(pre_arr);
})
})
//参数说明
// f = 1,升序排列; f = -1,降序排列