動態處理數據,按照升降處理價格,或者出發時間來排序
必選是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;
}