简单的JavaScript表格排序

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

asialee029

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

阅读量79

点赞数

分类专栏： javascript 文章标签： JavaScript C C++ C# Web ViewUI

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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


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>

asialee029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的JavaScript表格排序

[size=medium] 自己写的一个HTML表格排序的程序，由于是自己写的，所以比较土，况且没有使用任何JavaScript库，所以只实现了一些简单的功能。主要是了解一下原理。[/size][code="js"]function ieOrFireFox(ob) { if (ob.textContent != null) return ob.textContent...
复制链接

扫一扫

专栏目录