IFE-TASK38（任务三十八：UI组件之排序表格）

前言：

百度前端技术学院，任务三十八：UI组件之排序表格

知识点：

1）某列元素大小排序 --> 对行重新排序

function(eve){
					var content = eve.target.parentNode.innerHTML.split('<')[0],
					      listNum = config.thContent.indexOf(content),
					      sortList = [],
					      newList = [],
					      trList = tab.childNodes;
					//取出要排序的数据，保存在数组中
					for( var i = 0;i<config.rowNum-1;i++){
						sortList.push(trList[i+1].childNodes[listNum].innerHTML);
					}
					//得到所要求经排序后的数组
					//降序排序
					newList = sortList.sort(sortNumber);
					//需要升序则取反
					if(!flag){
						newList = newList.reverse();
					}
					//获得当前列的数据分布情况
					sortList = [];
					for( i = 0;i<config.rowNum-1;i++){
						sortList.push(trList[i+1].childNodes[listNum].innerHTML);
					}
					//根据前后两个数组，重新排序列表项
					changeOrder(newList,sortList);
					function sortNumber(a,b){
						return b - a ;
					}
					//根据排序结果重新排列行序
					function changeOrder(newList,oldList){
						var len = newList.length,
						      pos_before,
						      pos_now,
						      trList = tab.childNodes,
						      tempNode = document.createElement('tr'),
						      temp;
						for(var k = 0;k<len;k++){
							//记录当前值在新表中位置，并寻找当前值在原表中的位置
							pos_now = k;
							pos_before = oldList.indexOf(newList[k]);
							//如果当前值在两个表中的位置不一样，则交换两个节点的内容
							if(pos_now !== pos_before){
								tempNode.innerHTML = trList[pos_before+1].innerHTML;
								trList[pos_before+1].innerHTML = trList[pos_now+1].innerHTML;
								trList[pos_now+1].innerHTML = tempNode.innerHTML;
								//更新表的内容
								temp = oldList[pos_before];
								oldList[pos_before] = oldList[pos_now];
								oldList[pos_now] = temp;
							}
						}
					}
				}

代码地址：点击打开链接

DEMO：点击打开链接