23、HTML表格排序

最新推荐文章于 2022-03-31 16:26:43 发布

junJZ_2008

最新推荐文章于 2022-03-31 16:26:43 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： HTML 脚本算法 JavaScript ViewUI

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

脚本

/*
* 常用三种类型转换(int float date string)：
* sValue 要转换的值
* sDataType 要转换的值的类型
*/
function convert(sValue, sDataType) {
	switch (sDataType) {
	  case "int"://整型
		return parseInt(sValue);
	  case "float"://浮点型
		return parseFloat(sValue);
	  case "date"://日期型
		return new Date(Date.parse(sValue));
	  default://任何其他类型返回字符串
		return sValue.toString();
	}
}
/*
* 创建比较函数方法，这里采了闭包的方式，生成的比较函数根据所比较的列编号
* 与列数组类型不同而不同。
* iCol 要进行比较的列编号
* sDataType 列数据类型
*/
function generateCompareTRs(iCol, sDataType) {
	/*真真的比较函数，供数组的sort方法调用，oTR1 oTR2两个参数由sort方法传进来
	oTR1为比较的第一行，oTR2为比较的第二行*/
	return function compareTRs(oTR1, oTR2) {
		var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
		var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
		//按升序比较，如果是日期类型时会自动调用其valueOf方法返date 的毫秒再进行比较
		if (vValue1 < vValue2) {
			return -1;
		} else {
			if (vValue1 > vValue2) {
				return 1;
			} else {
				return 0;
			}
		}
	};
}
/*
* 表格比较，由HTML点击事件调用
* sTableID 要比较的表格id
* iCol 要较的表格的列的编号
* sDataType 列的数据类型
*/
function sortTable(sTableID, iCol, sDataType) {
	//获取表格对象
	var oTable = document.getElementById(sTableID);
	//获取表格体
	var oTBody = oTable.tBodies[0];
	//获取表格体中所有行
	var colDataRows = oTBody.rows;
	//存储所有表格行，借且于数组来进行排序处理
	var aTRs = new Array;
	       
	//把所有的行存储到数组里
	for (var i = 0; i < colDataRows.length; i++) {
		aTRs[i] = colDataRows[i];
	}
	/*sortCol为表格的扩展属性，标示最后是根据哪列来进行排序的。
	如果要传进来的列与上次排序的列是同一列时，直接对数组进行
	reverse反序操作，这样排序的速度会更快*/
	if (oTable.sortCol == iCol) {
		aTRs.reverse();
	} else {
	//如果是第一次排序，则调用排序算法进行排序
		aTRs.sort(generateCompareTRs(iCol, sDataType));
	}
	       				
	//创建文档碎片，这样不用一个一个把行添加到表格对象中，而是一次就可以了
	var oFragment = document.createDocumentFragment();
	for (var i = 0; i < aTRs.length; i++) {
		oFragment.appendChild(aTRs[i]);
	}
	      
	//把所排序的行重样追加到表格对象中，注：这里没有单独先删除表格排序前的行
	//因为如果追加的行是一样的话，appendChild操作会先自动删除后再添加。
	oTBody.appendChild(oFragment);
	oTable.sortCol = iCol;
}

HTML演示代码

<html>
    <head>
	<title>Table Sort Example</title>
        <script type="text/javascript">
        		//实现脚本如上面所示......
        </script>
    </head>
    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
        		<!-- 需要表头 -->
            <thead>
                <tr><!-- 如果不会以数据类型时，默认为字符串，行号自己随便编，只要不同就行 -->
                    <th οnclick="sortTable('tblSort', 0)" 
                        style="cursor:pointer">Last Name</th>
                    <th οnclick="sortTable('tblSort', 1)" 
                        style="cursor:pointer">First Name</th>
                    <th οnclick="sortTable('tblSort', 2, 'date')" 
                        style="cursor:pointer">Birthday</th>
                    <th οnclick="sortTable('tblSort', 3, 'int')" 
                        style="cursor:pointer">Siblings</th>
                </tr>
            </thead>
            <tbody><!-- 表格体 -->
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>7/12/1978</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                    <td>10/15/1977</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                    <td>2/25/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                    <td>7/8/1980</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                    <td>7/22/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                    <td>1/14/2000</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>        
    </body>
</html>