jq動態處理價格升降數據

動態處理數據,按照升降處理價格,或者出發時間來排序
必選是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;
	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章