`

简单的JavaScript表格排序

JavaScriptCC++C#Web 
阅读更多

    自己写的一个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>
分享到：
| Digester 1.1 单元测试之RuleTestCase
评论
12 楼 zengwenbin05 2010-03-15  
真厉害呀,,,

感觉很有用
11 楼 dingyaodanv1 2010-03-09  
cloudgamer 写道
不错，我也写过一个table排序
多多交流

哈哈，无意间看着眼熟`博客园里面的神人`javascript高手，呵呵
10 楼 hai_yang 2010-03-08  
值得学习~~
9 楼 刃之舞 2010-03-08  
asialee 写道
刃之舞 写道
          

楼主
Nicholas C.Zakas  Professional java script for web Developers

Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少


什么意思？


<html>
    <head>
	<title>Table Sort Example</title>
        <script type="text/javascript">
        
            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();
                
                }
            }
        
            function generateCompareTRs(iCol, sDataType) {
        
                return  function compareTRs(oTR1, oTR2) {
                            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        
                            if (vValue1 < vValue2) {
                                return -1;
                            } else if (vValue1 > vValue2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        };
            }
           
            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];
                }
        
                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]);
                }
       
                oTBody.appendChild(oFragment);
                oTable.sortCol = iCol;
            }

        </script>
    </head>
    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th onclick="sortTable('tblSort', 0)" 
                        style="cursor:pointer">Last Name</th>
                    <th onclick="sortTable('tblSort', 1)" 
                        style="cursor:pointer">First Name</th>
                    <th onclick="sortTable('tblSort', 2, 'date')" 
                        style="cursor:pointer">Birthday</th>
                    <th onclick="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>


书上的例子代码，大体上没觉出跟你的有什么不同
8 楼 asialee 2010-03-06  
ving0099 写道
lz怎么没有注释的

我编写JS没有养成好习惯，一般会忘记加上注释，以后会注意的。
7 楼 ving0099 2010-03-05  
lz怎么没有注释的
6 楼 asialee 2010-03-05  
刃之舞 写道
          

楼主
Nicholas C.Zakas  Professional java script for web Developers

Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少


什么意思？
5 楼 刃之舞 2010-03-05  
          

楼主
Nicholas C.Zakas  Professional java script for web Developers

Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少
4 楼 cloudgamer 2010-03-05  
jindw 写道
asialee 写道
cloudgamer 写道
不错，我也写过一个table排序
多多交流


不错，看来一下，咱们的排序的思想是一样的，但是功力比我的强多了，向你学习。



最简单的表格排序是这样的：
http://www.iteye.com/topic/567161 

#   sort:function(list, inc){  
#     $("sort").className = inc?"down":"up";  
#     list.sort(function(a, b){  
#       return (inc?1:-1)*a.name.localeCompare(b.name);  
#     });  
#     render(data);  
#   },


localeCompare只能判断字符
3 楼 jindw 2010-03-05  
asialee 写道
cloudgamer 写道
不错，我也写过一个table排序
多多交流


不错，看来一下，咱们的排序的思想是一样的，但是功力比我的强多了，向你学习。



最简单的表格排序是这样的：
http://www.iteye.com/topic/567161 

#   sort:function(list, inc){  
#     $("sort").className = inc?"down":"up";  
#     list.sort(function(a, b){  
#       return (inc?1:-1)*a.name.localeCompare(b.name);  
#     });  
#     render(data);  
#   },

2 楼 asialee 2010-03-05  
cloudgamer 写道
不错，我也写过一个table排序
多多交流


不错，看来一下，咱们的排序的思想是一样的，但是功力比我的强多了，向你学习。
1 楼 cloudgamer 2010-03-05  
不错，我也写过一个table排序
多多交流
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript 表格排序

    JavaScript 表格排序双击可进行按表格列排序

    JavaScript实现表格排序

    而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...

    Javascript表格排序大全

    JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...

    javaScript对表格排序

    总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...

    JavaScript实现表格排序，点击表头切换升序降序，非常简单

    &lt;title&gt;JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)"&gt;...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    四、表格排序 对于表格，我们可以扩展以上方法，监听单元格的拖放事件。在`drop`事件中，不仅要更新单元格的顺序，还要调整相关行的顺序。这可能涉及到对表格数据的重新排序，尤其是当数据与后端同步时。 五、优化...

    很灵活的javascript 表格排序 功能强大 可自定义排序规则

    JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...

    javascript排序表格

    javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格

    javaScript对表格自动排序

    下面我们将深入探讨如何使用JavaScript实现表格排序功能。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示表格行，`&lt;th&gt;`表示表头单元格，`&lt;td&gt;`表示数据单元格。例如： ```html 姓名 ...

    javascript表格排序案例(面向对象)案例资料

    通过以上步骤，你将能够构建一个功能完善的JavaScript表格排序功能，同时利用面向对象编程的思想提高了代码的可维护性和复用性。在学习这个案例资料时，务必仔细研究每个部分，理解其背后的逻辑，并尝试自己动手实践...

    javascript表格排序（顺序和逆序）并高亮显示

    总结来说，实现JavaScript表格排序并高亮显示的关键在于理解DOM操作、数组排序以及CSS样式的应用。通过编写比较函数、遍历和排序表格行，以及更新单元格样式，我们可以创建出具有动态排序和高亮功能的表格。这个过程...

    javascript带箭头的表格排序实例

    在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

    javascript 表格排序多种数据类型排序(中文混合数字排序).zip

    总结来说，处理JavaScript表格中中文混合数字的排序需要自定义排序函数，该函数能区分并适当地处理不同数据类型。通过这样的方法，我们可以确保数据在展示时始终按预期的方式排序，提供良好的用户体验。这个压缩包...

    jquery 简单表格排序

    **jQuery 简单表格排序** 在Web开发中，数据展示是常见的需求，尤其是在处理大量结构化信息时，表格（Table）是首选的布局方式。然而，为了提高用户体验，我们通常需要实现表格数据的动态排序功能。jQuery是一个轻...

    javascript页面表格实现不刷新排序的例子

    总的来说，使用JavaScript实现的页面表格排序功能，不仅可以提高用户体验，还可以减少服务器负载，因为它是在客户端完成的，无需每次排序都向服务器发送请求。这个例子是JavaScript在网页交互设计中的一个典型应用，...

    jquery实现表格排序

    初始化表格排序功能非常简单，只需通过`tableSorter()`方法指定需要排序的表格ID即可。例如： ```javascript $(document).ready(function(){ $("#large").tableSorter(); }); ``` 如果希望在表格加载时就显示斑马...

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序).zip

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)

    JavaScript Sort 表格排序

    总的来说，JavaScript中的`sort()`方法和`localeCompare()`函数是实现表格排序的关键工具，但需要配合自定义的比较函数和数据转换策略，以适应不同类型的表格数据。理解这些概念并正确应用它们，可以帮助我们构建出...

Magicbox
Global site tag (gtag.js) - Google Analytics