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;
	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章