当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

简单的JavaScript表格排序

发表于: 2010-03-05   作者:asialee   来源:转载   浏览次数:
摘要:     自己写的一个HTML表格排序的程序,由于是自己写的,所以比较土,况且没有使用任何JavaScript库,所以只实现了一些简单的功能。主要是了解一下原理。 function ieOrFireFox(ob) { if (ob.textContent != null) return ob.textContent; var s = ob.i

    自己写的一个HTML表格排序的程序,由于是自己写的,所以比较土,况且没有使用任何JavaScript库,所以只实现了一些简单的功能。主要是了解一下原理。

function ieOrFireFox(ob) {
	if (ob.textContent != null)
		return ob.textContent;
	var s = ob.innerText;
	return s.substring(0, s.length);
}

function sortTableByColumn(sortTableId,iCol,dataType){
	
	
	var sortTable = document.getElementById(sortTableId);
	
	var tbody = sortTable.tBodies[0];
	var colRows = tbody.rows;
	var aTrs = new Array;
	
	var sortedHeader = sortTable.tHead.rows[0].cells[iCol];
	for (var i = 0; i < colRows.length; i++) {
		aTrs[i] = colRows[i];
	}		
	if (sortTable.sortCol == iCol) {
		if (sortTable.sortOrder == "desc") {
			aTrs.sort(compareEle(iCol, dataType,'asc'));
			sortTable.sortOrder = "asc";
		} else {
			aTrs.sort(compareEle(iCol, dataType,'desc'));
			sortTable.sortOrder = "desc";
		}
	} else {
		aTrs.sort(compareEle(iCol, dataType,'asc'));
		sortTable.sortOrder = "asc";
	}
	sortTable.sortCol = iCol;
	
	
	var oFragment = document.createDocumentFragment();
	for ( var i = 0; i < aTrs.length; i++) {
		oFragment.appendChild(aTrs[i]);
	}
	tbody.appendChild(oFragment);
	
}
function sortTable(tableId,thobj,dataType) {
	var iCol = document.getElementById(thobj).cellIndex;
	sortTableByColumn(tableId,iCol,dataType);
}

function convert(sValue, dataType,sortDerection) {
	switch (dataType) {
	case "int":
		if(sValue.length <= 0){
			if(sortDerection == "asc") {
				sValue = "1000";
			} else {
				sValue = "-1";
			}
		}
		return parseInt(sValue, 10);
	case "float":
		return parseFloat(sValue);
	case "date":
		return new Date(Date.parse(sValue));
	default:
		return sValue.toString().toLowerCase();
	}
}

function compareEle(iCol, dataType,sortDerection) {
	return function(oTR1, oTR2) {
		var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType,sortDerection);
		var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType,sortDerection);
		var returnResult = 0;
		if (vValue1 < vValue2) {
			returnResult = -1;
		} else if (vValue1 > vValue2) {
			returnResult = 1;
		} else {
			returnResult = 0;
		}
		if(sortDerection == "desc"){
			return -returnResult;
		} else {
			return returnResult;
		}
	};
}

<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Table Sort Example</title>
        <script type="text/javascript" src="sortTable.js" > </script>
        
    </head>

    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th onclick="sortTableByColumn('tblSort',0)" style="cursor:pointer">Last Name</th>
	                <th onclick="sortTableByColumn('tblSort',1,'date')" style="cursor:pointer">Date</th>
                    <th onclick="sortTableByColumn('tblSort',2,'float')" style="cursor:pointer">Salary</th>
	                <th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">Age</th>
                    <th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">ChineseName</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
					<td>2008/9/20</td>
                    <td>100.03</td>
					<td>20</td>
					<td>我</td>
                </tr>
                <tr>
                    <td>Johnson</td>
					<td>2008/10/4</td>
                    <td>200.8</td>
					<td>18</td>
					<td>爱</td>
                </tr>
                <tr>
                    <td>Henderson</td>
					<td>2008/10/11</td>
                    <td>50.3</td>
					<td>45</td>
					<td>北</td>
                </tr>
                <tr>
                    <td>Williams</td>
					<td>2008/10/08</td>
                    <td>50</td>
					<td>20</td>
					<td>京</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
					<td>2008/10/3</td>
                    <td>400.2</td>
					<td>9</td>
					<td>故</td>
                </tr>
                <tr>
                    <td>Walker</td>
					<td>2008/11/4</td>
                    <td>20.6</td>
					<td>20</td>
					<td>宫</td>
                </tr>
            </tbody>
        </table>

		
    </body>
</html>

简单的JavaScript表格排序

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ProgI
问题描述:后台拿到JSON数据后,调用共通组件输出数据,并对不同情况拼接输出形式,部分代码如下: f
  声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!   本文为楼主自己的学习记录文章
<STYLE type=text/css>TABLE { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px s
好久没写表格操作全忘了,看别人的看不懂,所以只有自己写个,没有用jquery,觉得直接用jquery写就搞
效果如下: <script type="text/javascript"> function AddTR(){ //取得新增行数的ID值 var i
前段时间用Jquery框架,把原生态Javascript都忘得差不多了!最近不怎么忙,在重新熟悉一下!O(∩_∩
javascript中对以下的JSON数据进行排序 var objTEST = [ {AAA:'144', BBB:'141', CCC:'2001', DDD:'1
JavaScript 动态表格的实现,效果:当点击最后一行时,动态生成新的一行。实现了文本框、单选框、下
程序源码,为了一次性全粘贴把js全复制过来,很多和此无关 以下为很久以前写的,时至今日可以用 jQue
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号