【前端实例】JavaScript对Table数据进行排序操作

【提出需求】

       点击表格头部的时候根据对应列的所有值来进行排序，最终显示排序后的数据行。

【具体效果】

【步骤思路】

       点击需要排序列的数据头，获取数据头所在列的索引。通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。

【问题解决】

       1、如何知道那一列需要排序？

             想要知道那些一列的数据需要排序，实现的方法有很多种，但是最重要的一点是必须要知道所点击的头部所在的列数。最简单的方法就是给需要排序的头部添加排序列名，之后判断该点击的头部是否是排序列名（判断的方式也有很多种，本实例使用的是className属性，因为就只有一个类名。还有其他方式getAttribute、match、search、indexOf、lastIndexOf等函数），如果是则执行排序处理代码块，如果不是则不做任何的处理。

if(this.className)

       相关知识点：

             文章：JavaScript对Html元素的Class操作 - className、classList、Attribute

             文章：JavaScript字符串和数值对象

 

       2、虽然获取了排序列的索引，但是如何获取每一行的所对应列的数据呢？

             排序列有一个特征就是相同一列所在行的索引都是相同的，所以获取了排序列的索引之后，只需要获取每一行的节点集合，然后再访问其节点内容的数据列集合，然后再通过索引去访问对应数据列的数据（通过innerText获取数据的文本值，如果数据是数值字符的话，一般会自动转化为数值，不过最好人为转化以下）。

ContTrList[j].getElementsByTagName("td")[this.index].innerText;

       相关知识点：

             文章：JavaScript之DOM操作总结

 

        3、虽然获取了每一行的数据，但是如何知道排序后该数据对应的是哪一行数据？

             想要解决这个问题也有很多种方式，但是都比较困难，例如可以通过自定义属性，但是这种方式无法解决跨域问题，也可以通过其他数组存储索引等等。本实例使用了二维数组，对每组数组元素的第二个元素赋予该数值对应行的索引值，从而解决无法跨域或者获取麻烦的问题的

for(var j = 0; j < ContTrList.length; j++) {
    //该for循环是遍历内容区中的tr标签,并且查找对应的td标签
    sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
    sortArray[j][1] = j;
}

        相关知识点：

             文章：JavaScript数组Array对象知识点详解

             文章： JavaScript创建二维数组或多维数组

       注意：排序之前，需要确定行内的数据是数值还是字符串，是升序还是降序等等。通常的方法自然是遍历所有的列数据，看最终返回的结果。本实比较懒，只对第一个进行了判断，在这里安利一波isNaN ()函数。isNaN() 函数用于检查其参数是否是非数字值。如果是非数字值，则返回true，否则返回false。这样我就省去了通过正则表达式去数据是字符还是数值了。

//判断是数值排序还是字符排序
if(!isNaN(sortArray[0][0])){
    sortArray.sort(sortNumber);
}else{
    sortArray.sort();
}

 

        4、获取了行索引之后，如何更新行数据呢？

             索引是无法重复的，所以我们可以通过循环去访问排序后的数值所对应的行索引，这里要注意的是我们获取的只是对应行的节点。所以想要更新数据行也有很多种方法，例如：删除容器内的所有数据行子节点，之后通过遍历一个一个的插入。本实例直接通过拼接数据行的HTML字符串，直接更新父容器的数据行。

//排序完毕之后开始调序
for(var x = 0; x < ContTrList.length; x++) {
    newNodeHtml += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
}
//删除当前内容，插入新的内容
Container.innerHTML = newNodeHtml;

         相关知识点：

             文章：JavaScript之DOM操作总结

 

【最终代码】

//HTML代码
<table border="1" cellpadding="5" style="border-collapse: collapse;text-align: center;">
	<tbody>
		<tr id="HeadTD">
			<td class="sort">姓名</td>
			<td class="sort">学号</td>
			<td class="sort">语文</td>
			<td class="sort">数学</td>
			<td class="sort">英语</td>
			<td class="sort">总分</td>
			<td class="sort">平均分</td>
		</tr>
	</tbody>
	<tbody id="ContTD">
		<tr>
			<td>张三</td>
			<td>220305</td>
			<td>11</td>
			<td>22</td>
			<td>33</td>
			<td>22</td>
			<td>44</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>220302</td>
			<td>33</td>
			<td>44</td>
			<td>66</td>
			<td>99</td>
			<td>33</td>
		</tr>
		<tr>
			<td>黄五</td>
			<td>220307</td>
			<td>22</td>
			<td>55</td>
			<td>22</td>
			<td>55</td>
			<td>66</td>
		</tr>
		<tr>
			<td>赵六</td>
			<td>220303</td>
			<td>44</td>
			<td>22</td>
			<td>33</td>
			<td>66</td>
			<td>88</td>
		</tr>
	</tbody>
</table>

//JavaScript代码
window.onload = function() {
	var HeadTD = document.getElementById("HeadTD");
	var ContTD = document.getElementById("ContTD");
	var HeadList = HeadTD.getElementsByTagName("td");
	var ContTrList = ContTD.getElementsByTagName("tr");
	var sortArray = new Array();
	var newNode;
	for(var i = 0; i < HeadList.length; i++) {
		HeadList[i].index = i;
		HeadList[i].onclick = function() {
			if(this.className) {
				newNode = "";
				for(var j = 0; j < ContTrList.length; j++) {
					sortArray[j] = new Array();
					sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
					sortArray[j][1] = j;
				}
				
				if(!isNaN(sortArray[0][0])){
					sortArray.sort(sortNumber);
				}else{
					sortArray.sort();
				}

				for(var x = 0; x < ContTrList.length; x++) {
					newNode += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
				}

				ContTD.innerHTML = newNode;
			}
		}
	}
}
function sortNumber(b, a) {
	if(a > b) {
		return 1
	} else if(a < b) {
		return -1
	} else {
		return 0
	}
}