动态处理数据,按照升降处理价格,或者出发时间来排序
必选是table th 和 tr td 格式
价格都是小数点的数字 parseFloat
如果整型 用 parseInt处理一下 注释会写在代码中
HTML
<div class="recommend_title mb30 clearFix">
<span class="fl title">全部车款</span>
<div class="fr">
<span class="odd_mr active">默认<em></em></span>
<span class="px_price mr30">
价格
<div class="top_downprice">
<!-- 价格上升按钮 -->
<a class="topprice" data-sort-type="">‹</a>
<!-- 价格下降按钮 同时设置 data-sort-type为none jq控制都会用到-->
<a class="downprice" data-sort-type="none">›</a>
</div>
</span>
</div>
</div>
<div class="popcarinfor mb60" id="dc_Table">
<table style="width: 100%; margin-bottom: 20px;">
<tbody>
<tr id="tou" style="background-color: #dce4ff;">
<th>2.0T 78kw 涡轮增压</th><th> 厂商指导价</th><th>经销商报价</th>
</tr>
<tr data-price="5.89">
<td class="carname" title="1.5L 手动 悦享型 经典版">1.5L 手动 悦享型 经典版</td>
<td>5.89万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
<tr data-price="5.49">
<td class="carname" title="1.5L 手动 畅享型 经典版">1.5L 手动 畅享型 经典版</td>
<td>5.49万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
<tr data-price="7.19">
<td class="carname" title="1.5L 自动 豪华型">1.5L 自动 豪华型</td>
<td>7.19万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
<tr data-price="7.09">
<td class="carname" title="1.5L 手动 精英型">1.5L 手动 精英型</td>
<td>7.09万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
<tr data-price="6.79">
<td class="carname" title="1.5L 自动 舒适型">1.5L 自动 舒适型</td>
<td>6.79万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
<tr data-price="6.69">
<td class="carname" title="1.5L 手动 豪华型">1.5L 手动 豪华型</td>
<td>6.69万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
</tbody>
</table>
<table style="width: 100%; margin-bottom: 20px;">
<tbody>
<tr id="tou" style="background-color: #dce4ff;">
<th>1.5T 78kw </th><th> 厂商指导价</th><th>经销商报价</th>
</tr>
<tr data-price="6.29">
<td class="carname" title="1.5L 手动 舒适型">1.5L 手动 舒适型</td>
<td>6.29万</td>
<td>暂无<a class="askprice ml10" onclick="bmTc('211','148','长城汽车','腾翼C30')">询价</a></td>
</tr>
</tbody>
</table>
</div>
设置一个数据data-price 接收到 对应车型的价格 样式没有,直说原理和jq代码问题控制
JQ
//排序 按价格升降序
$(document).on("click", ".top_downprice a", function () {
$(".odd_mr").removeClass("active");
var sortType = $(this).attr("data-sort-type");
//点击 下降趋势
if($(this).prop("className").indexOf("downprice") == '-1'){
sortType = "asc";
$(".downprice").removeClass("active");
$(".topprice").addClass("active");
}
if($(this).prop("className").indexOf("topprice") == '-1'){
sortType = "desc";
$(".topprice").removeClass("active");
$(".downprice").addClass("active");
}
var arr = new Array();
//除了当前单击的排序条件外,其他所有的排序条件
var btnSortListWithOutThis = $(".top_downprice a").not($(this));
//去掉排序样式并将排序类型设为"none"
btnSortListWithOutThis.find("a").removeClass("active").end().attr("data-sort-type", "none");
$("#dc_Table table tbody").children("tr").each(function(){
if($(this).attr("id") == "tou"){
$(this).remove();
}else{
arr.push($(this));
}
});
var trList = sortTableByFlightTime(sortType,arr);
var content = '<table style="width: 100%; margin-bottom: 20px;"><tbody>';
if(trList){
content += '<tr id="tou" style="background-color: #dce4ff;"><th>车款数据</th><th> 厂商指导价</th><th>经销商报价</th></tr>';
$.each(trList,function(key,value){
content += value.prop("outerHTML");
})
content += '</tbody></table>';
}
$("#dc_Table").html(content);
});
function sortTableByFlightTime(sortType,arr) {
//冒泡排序
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
var value1 = parseFloat(arr[j].attr("data-price"));
// console.log(value1);
var value2 = parseFloat(arr[j + 1].attr("data-price"));
// console.log(sortType);
if (sortType === "asc" ? value1 > value2 : value1 < value2) {
var temp = arr[j];
arr[j] = null;
arr[j] = arr[j + 1];
arr[j + 1] = null;
arr[j + 1] = temp;
}
}
}
//返回排序后的tr集合
return arr;
}