原生JS表格排序，实现淘宝商品列按价格要求等排序！

如何使用原生JS实现点击表格标题栏实现按要求自动排序功能？今天就教大家实现这个功能，这个功能可应用再淘宝等电商网站，按要求，如价格重新对商品排序

这里我就以同学曾经去百度面试遇到的一道面试题为例子，要求是点击不同的科目，按点击科目的成绩重新排序。

源码地址：http://download.csdn.net/detail/wcslb/9688040

HTML页面代码：

<body>
	<table id="table">
		<thead>
			<tr>
				<th>排名</th>
				<th>姓名</th>
				<th onclick="paixu(2)">语文</th>
				<th onclick="paixu(3)">数学</th>
				<th onclick="paixu(4)">外语</th>
				<th>总和</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td>李二狗</td>
				<td>76</td>
				<td>80</td>
				<td>87</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>陈莲莲</td>
				<td>98</td>
				<td>43</td>
				<td>78</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>Alien</td>
				<td>90</td>
				<td>53</td>
				<td>86</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>陈晓瑞</td>
				<td>80</td>
				<td>43</td>
				<td>87</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>高健</td>
				<td>43</td>
				<td>87</td>
				<td>98</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>张媛媛</td>
				<td>60</td>
				<td>54</td>
				<td>84</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>郑媛媛</td>
				<td>34</td>
				<td>34</td>
				<td>67</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>秦优</td>
				<td>54</td>
				<td>87</td>
				<td>87</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>陈书贞</td>
				<td>65</td>
				<td>87</td>
				<td>67</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>陈杲</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>

CSS代码：

<style>
		*{margin:0;padding:0;}
		table{border-collapse:collapse;margin:0 auto;}
		tbody tr{cursor:pointer;}
		th,td{width:200px;height:30px;border:1px solid #000;}
		td{text-align:center;}
	</style>

JS代码方法一：

	 <script type="text/javascript">
			// 1.获取所有的tr
			var oTr = document.querySelectorAll("tbody tr");
			function paixu (idx) {
				for (var i = 0; i < oTr.length; i++) {
					for (var j = 0; j < oTr.length-1-i; j++) {  //每次一次都会比出最大的值，放到最后，然后第二次数组长度减去1，再循环比一次
						if( Number(oTr[j].querySelectorAll("td")[idx].innerHTML)< Number(oTr[j+1].querySelectorAll("td")[idx].innerHTML)){
							var t = oTr[j+1].innerHTML;
							oTr[j+1].innerHTML = oTr[j].innerHTML;
							oTr[j].innerHTML = t;
						}
					}		
				}
			}
		 </script>

JS代码方法二：

 <script type="text/javascript">
	var tbody=document.querySelector("tbody")
	var tr=document.querySelectorAll("tbody tr");
		function paixu(idx){
		//新建两个素组 
		//tempArr:用来保存td里的数字进行大小排序;
		//TrArr:用来保存克隆出来的Tr;
			var tempArr=[];
			var TrArr=[];
			for(i=0;i<tr.length;i++){
				tempArr.push( Number(tr[i].querySelectorAll("td")[idx].innerHTML) );
				TrArr.push(tr[i].cloneNode(true));
			};
				tempArr.sort(function(a,b){return a-b;})
			for(var j=0;j<tempArr.length;j++){
						for(var p=0;p<TrArr.length;p++){
						if( Number(tempArr[j]) == Number(TrArr[p].querySelectorAll("td")[idx].innerHTML) ){
						tbody.appendChild(TrArr[p]);
					}
				}
			};
			var trlength=tr.length;
			for(var k=0;k<trlength;k++){
				tbody.removeChild(document.querySelectorAll("tbody tr")[0]);
			}
		}
		 </script>

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

原生JS表格排序，实现淘宝商品列按价格要求等排序！

猜你喜欢