JavaScript 如何实现页面既有的数据的排序.

BankingRegulatorLLM 2012-04-05 11:43:43

现在又一个页面，里面有个table表数据，大致的表格如下

-------------------------------
| 姓名 | ..... | 得分 |
--------------------------------
| 张三 | ..... | 1000 |
--------------------------------
| 李四 | ..... | 4490 |
--------------------------------
| 王五 | ..... | 8760 |
--------------------------------
这里的得分人员手工打分的，现在的需求就是，当把这些人的得分都打好以后，
我点击一个按钮，这个按钮实现的功能就是: 将这些数据按照得分由高到低的顺序
排个序。这是PM要求的，我JS不在行，我说我在后台做吧，他说就用JS 省资源，顺便
让我学习一下，求朋友们给答案，就是那个按钮的具体代码活着详细的思路也行。

...全文

299 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuzuning 2012-04-06

打赏
举报

#14 代码明明是错的，却得 40 分
真不知道这个世道怎么啦

峭沙 2012-04-06

打赏
举报

[Quote=引用 16 楼的回复:]

#14 代码明明是错的，却得 40 分
真不知道这个世道怎么啦
[/Quote]确实有错，没考虑IE。下面这个应该没什么问题了

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <style>

		table,th, td{

			border: 1px solid black;

		}

    	table{

    		table-layout: fixed;

    		width: 200px;

			border-collapse:collapse;

			text-align: center;

		}

		th{

			width: 50%;

		}

		td input{

			width: 100%;

			border: none;

		}

    </style>

</head>

<body>

	<form>

		<table>

			<thead>

				<tr>

					<th>姓名</th>

					<th>得分</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>张三</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>李四</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>王五</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

			</tbody>

		</table>

		<input id="order_btn" type="button" value="order"/>

	</form>

    <script>

    	document.getElementById("order_btn").onclick = function(){

    		// arguments是参数对象，是传递给该函数的所有参数以及一些函数运行时属性的集合

    		// arguments.callee是该函数本身的引用

    		var callee = arguments.callee;

    		// 将TableOrder的实例保存在该函数对象中(类似静态变量)，以避免多次创建对象，提高效率。(注：函数是一个有函数体的特殊对象)

    		if(!callee.tableOrder){

    			callee.tableOrder = new Table(this.parentNode.getElementsByTagName("table")[0]);

    		}

    		callee.tableOrder.makeOrder("score", "desc");

    	}

    	function Table(){

    		// 初始化方法，类似构造器

    		this.init = function(table){

    			this.table = table;

    		}

    		this.makeOrder = function(clazz, order){

    			var trs = this.getRows(),

    				arr = toArray(trs);

    			arr = this.sort(arr, clazz, order);

    			this.rebuildTbody(arr);

    		}

    		this.getRows = function(){

    			return this.table.tBodies[0].children;

    		}

    		this.sort = function(arr, clazz, order){

    			// 调用数组排序方法

    			var factor = 1, value1 = 0, value2 = 0;

				if(order === "asc"){

					factor = 1;

				}else if(order === "desc"){

					factor = -1;

				}

				return arr.sort(function(arg1, arg2){

					value1 = parseInt(getElementsByClassName(arg1, clazz)[0].value);

    				value2 = parseInt(getElementsByClassName(arg2, clazz)[0].value);

    				return (value1 - value2) * factor;

				});

    		}

    		this.rebuildTbody = function(trs){

    			// createDocumentFragment自己搜吧，主要是用来减少页面reflow和repaint，提高效率

    			var fragment = document.createDocumentFragment(),

    				tbody = document.createElement("tbody");

    			

    			for(var i = 0, len = trs.length; i < len; i++){

    				fragment.appendChild(trs[i]);

    			}

    			tbody.appendChild(fragment);

    			this.table.replaceChild(tbody, this.table.tBodies[0]);

    		}

    		function getElementsByClassName(elem, clazz){

    			if(elem.getElementsByClassName){

    				return toArray(elem.getElementsByClassName(clazz));

    			}else{

    				var childrens = elem.getElementsByTagName("*"),

    					reg = new RegExp(),

    					result = [];

    				reg.compile("\\b" + clazz + "\\b");

    				for(var i = 0, len = childrens.length; i < len; i++){

    					if(reg.test(childrens[i].className)){

    						result.push(childrens[i]);

    					}

    				}

    				return result;

    			}

    		}

    		function toArray(obj){

    			try{

			    	return Array.prototype.slice.call(obj, 0);

			    }catch(e){

			    	var result = [];

			    	for(var i = 0, len = obj.length; i < len; i++){

			    		result.push(obj[i]);

			    	}

			    	return result;

			    }

    		}

    		this.init.apply(this, arguments);

    	}

    </script>

</body>

</html>

BankingRegulatorLLM 2012-04-05

打赏
举报

先说声巨大的感谢，其实我想加你为好友，但是系统提示我没有权限，我勒个汗啊。
CSDN我都上了这么长时间了，为什么还加不了呢 ?
[Quote=引用 1 楼的回复:]

HTML code

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<ul id="ul">
<li>小王……
[/Quote]

001007009 2012-04-05

打赏
举报



<!doctype html>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

		</style>

	</head>

	<body>

		<ul id="ul">

			<li>小王<em>74</em></li>

			<li>小李<em>65</em></li>

			<li>小张<em>56</em></li>

			<li>小周<em>84</em></li>

			<li>小艾<em>63</em></li>

		</ul>

		<script>

			function $(o){return document.getElementById(o)}

			function makeArray( obj ){

				var arr = [];

				for ( var i = 0, len = obj.length; i < len; i++ ){

					arr.push(obj[i]);

				}

				return arr;

			}

			function asc( x, y ){ //升序

				return parseInt( x.innerHTML ) - parseInt( y.innerHTML );

			}



			function makeOrder( wrapper, obj, order ){

				var order = order || 'asc';

				var wrapper = $( wrapper );

				var obj = wrapper.getElementsByTagName( obj );

				var arr;	

				arr = makeArray( obj ); // 将对象转为数组

				if ( order == 'asc' ){

					arr.sort( asc );

				} else {

					arr.sort( asc ).reverse();

				}	

				for( var i = 0, len = arr.length; i < len; i++ ){

					wrapper.appendChild( arr[i].parentNode )

				}

			}

			

			makeOrder( 'ul', 'em', 'asc' )

			

			

			

			

		</script>

	</body>

</html>

楼主参考下

sambindisga 2012-04-05

打赏
举报

这么多回复，每个都看了，试试才知道适不适合，学习了

峭沙 2012-04-05

打赏
举报

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <style>

		table,th, td{

			border: 1px solid black;

		}

    	table{

    		table-layout: fixed;

    		width: 200px;

			border-collapse:collapse;

			text-align: center;

		}

		th{

			width: 50%;

		}

		td input{

			width: 100%;

			border: none;

		}

    </style>

</head>

<body>

	<form>

		<table>

			<thead>

				<tr>

					<th>姓名</th>

					<th>得分</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>张三</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>李四</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>王五</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

			</tbody>

		</table>

		<input id="order_btn" type="button" value="order"/>

	</form>

    <script>

    	document.getElementById("order_btn").onclick = function(){

    		// arguments是参数对象，是传递给该函数的所有参数以及一些函数运行时属性的集合

    		// arguments.callee是该函数本身的引用

    		var callee = arguments.callee;

    		// 将TableOrder的实例保存在该函数对象中(类似静态变量)，以避免多次创建对象，提高效率。(注：函数是一个有函数体的特殊对象)

    		if(!callee.tableOrder){

    			callee.tableOrder = new TableOrder(this.parentNode.getElementsByTagName("table")[0]);

    		}

    		callee.tableOrder.makeOrder("score", "desc");

    	}

    	function TableOrder(table){

    		// 初始化方法，类似构造器

    		this.init = function(){

    			this.tbody = table.getElementsByTagName("tbody")[0];

    			this.trs = this.tbody.children;

    		}

    		this.makeOrder = function(clazz, order){

    			// this.trs是个NodeList对象，是个伪数组，将其转化成数组

    			var arr = Array.prototype.slice.call(this.trs, 0);

    			// 调用数组排序方法

    			arr.sort(function(arg1, arg2){

    				var factor = 1, value1 = 0, value2 = 0;

    				if(order === "asc"){

    					factor = 1;

    				}else if(order === "desc"){

    					factor = -1;

    				}

    				value1 = parseInt(getElementsByClassName(arg1, clazz)[0].value);

    				value2 = parseInt(getElementsByClassName(arg2, clazz)[0].value);

    				return (value1 - value2) * factor;

    			});

    			// createDocumentFragment自己搜吧，主要是用来减少页面reflow和repaint，提高效率

    			var fragment = document.createDocumentFragment();

    			for(var i = 0, len = arr.length; i < len; i++){

    				fragment.appendChild(arr[i]);

    			}

    			this.tbody.innerHTML = "";

    			this.tbody.appendChild(fragment);

    		}

    		function getElementsByClassName(elem, clazz){

    			if(elem.getElementsByClassName){

    				return Array.prototype.slice.call(elem.getElementsByClassName(clazz), 0);

    			}else{

    				var childrens = elem.getElementsByTagName("*"),

    					reg = new RegExp("\b" + clazz + "\b"),

    					result = [];

    				reg.complie();

    				for(var i = 0, len = childrens.length; i < len; i++){

    					if(reg.test(childrens[i].className)){

    						result.push(childrens[i]);

    					}

    				}

    				return result;

    			}

    		}

    		this.init();

    	}

    </script>

</body>

</html>

胡飞 2012-04-05

打赏
举报

[Quote=引用 9 楼的回复:]

JScript code

function sortTable(){
var obj = document.getElementById("ul").getElementsByTagName('li');
obj = Array.prototype.slice.call(obj, 0);
obj……
[/Quote]
生成数组没有考虑IE,下面的是把IE加上

            function sortTable2(){

                var obj = document.getElementById("ul").getElementsByTagName('li');

                if (window.ActiveXObject) {

                    var oo = [];

                    for (var i in obj) {

                        if (typeof obj[i] === 'object') 

                            oo.push(obj[i]);

                    }

                    obj = oo

                }

                else {

                    obj = Array.prototype.slice.call(obj, 0);

                }

                obj.sort(function(a, b){

                    var reg = function(e){

                        return e.getElementsByTagName('em')[0].innerHTML

                    };

                    return reg(b) - reg(a)

                });

                

               // document.getElementById("ul").innerHTML = '';

               for (var i in obj) {

                   document.getElementById("ul").appendChild(obj[i])

              }

            }

<<javascript 王者归来>>第12.5.6节这里就是例子(代码很漂亮可以看看).

Acesidonu 2012-04-05

打赏
举报

首先是获取数据生成js数组，再用数组的sort排序，排序时传递排序函数。再用排好序的数组重新生成表格

BankingRegulatorLLM 2012-04-05

打赏
举报

[Quote=引用 10 楼的回复:]

引用 8 楼的回复:三个例子都试试了，就你的能运行。第二个也不行。
太谢谢了。。。例子都跑不起来还各种拍马屁，我只能说你真能拍。。
[/Quote]

哦，那就算拍马屁吧，我一直在这里等，一看有人回复了，就先感谢一般，，，，，

以后改了这毛病。。你写的这代码能给个思路吗？

像里面 arguments.callee;
Array.prototype.slice.call 等等关键字我可以百度解决。。
话说这代码里面还真是新鲜，一堆没见过的关键字

不过你写的东西看半天啊

峭沙 2012-04-05

打赏
举报

[Quote=引用 8 楼的回复:]三个例子都试试了，就你的能运行。第二个也不行。
太谢谢了。。。[/Quote]例子都跑不起来还各种拍马屁，我只能说你真能拍。。

胡飞 2012-04-05

打赏
举报



 function sortTable(){

                var obj = document.getElementById("ul").getElementsByTagName('li');

                obj = Array.prototype.slice.call(obj, 0);

                obj.sort(function(a, b){

                    var reg = function(o){

                        return o.getElementsByTagName('em')[0].innerHTML

                    };

                    return reg(b) - reg(a)

                });

               // console.log(obj)

                document.getElementById("ul").innerHTML = '';

                for (var i in obj) {

                    document.getElementById("ul").appendChild(obj[i])

                }

            }

BankingRegulatorLLM 2012-04-05

打赏
举报

[Quote=引用 7 楼的回复:]

HTML code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
table{
width: 600px;
border-collapse:collapse;
text-align: center;
}
……
[/Quote]

三个例子都试试了，就你的能运行。第二个也不行。
太谢谢了。。。

峭沙 2012-04-05

打赏
举报

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <style>

    	table{

    		width: 600px;

			border-collapse:collapse;

			text-align: center;

		}

		

		table,th, td{

			border: 1px solid black;

		}

		td input{

			width: 100%;

			border: none;

		}

    </style>

</head>

<body>

	<form>

		<table>

			<thead>

				<tr>

					<th>姓名</th>

					<th>得分</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>张三</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>李四</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

				<tr>

					<td>王五</td>

					<td><input class="score" type="text" value="0" /></td>

				</tr>

			</tbody>

		</table>

		<input id="order_btn" type="button" value="order"/>

	</form>

    <script>

    	document.getElementById("order_btn").onclick = function(){

    		var callee = arguments.callee;

    		if(!callee.tableOrder){

    			callee.tableOrder = new TableOrder(this.parentNode.getElementsByTagName("table")[0]);

    		}

    		callee.tableOrder.makeOrder("score", "asc");

    	}

    	function TableOrder(table){

    		this.init = function(){

    			this.tbody = table.getElementsByTagName("tbody")[0];

    			this.trs = this.tbody.children;

    		}

    		this.makeOrder = function(clazz, order){

    			var arr = Array.prototype.slice.call(this.trs, 0);

    			arr.sort(function(arg1, arg2){

    				var factor = 1, value1 = 0, value2 = 0;

    				if(order === "asc"){

    					factor = 1;

    				}else if(order === "desc"){

    					factor = -1;

    				}

    				value1 = parseInt(getElementsByClassName(arg1, clazz)[0].value);

    				value2 = parseInt(getElementsByClassName(arg2, clazz)[0].value);

    				console.log((value1 - value2) * factor);

    				return (value1 - value2) * factor;

    			});

    			var fragment = document.createDocumentFragment();

    			for(var i = 0, len = arr.length; i < len; i++){

    				fragment.appendChild(arr[i]);

    			}

    			this.tbody.innerHTML = "";

    			this.tbody.appendChild(fragment);

    		}

    		function getElementsByClassName(elem, clazz){

    			if(elem.getElementsByClassName){

    				return Array.prototype.slice.call(elem.getElementsByClassName(clazz), 0);

    			}else{

    				var childrens = elem.getElementsByTagName("*"),

    					reg = new RegExp("\b" + clazz + "\b"),

    					result = [];

    				reg.complie();

    				for(var i = 0, len = childrens.length; i < len; i++){

    					if(reg.test(childrens[i].className)){

    						result.push(childrens[i]);

    					}

    				}

    				return result;

    			}

    		}

    		this.init();

    	}

    </script>

</body>

</html>

BankingRegulatorLLM 2012-04-05

打赏
举报

[Quote=引用 4 楼的回复:]

修正：
HTML code

<ul id="ul">
<li>小王<em>74</em></li>
<li>小李<em>65</em></li>
<li>小张<em>56</em></li>
<li>小周<em>84</em></li>
<li>小艾<em>63</em></li>
</ul>
<input type="button" value="……
[/Quote]

谢谢prototype。看你这名字就知道你是正规JS部队出身。

prototyper 2012-04-05

打赏
举报

var reg = reg || function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};

prototyper 2012-04-05

打赏
举报

修正：



<ul id="ul">

    <li>小王<em>74</em></li>

    <li>小李<em>65</em></li>

    <li>小张<em>56</em></li>

    <li>小周<em>84</em></li>

    <li>小艾<em>63</em></li>

</ul>

<input type="button" value="TEST" onclick="sortTable()">



<script type=text/javascript>

function sortTable() {

    var obj = document.getElementById("ul");

    var arr = obj.innerHTML.match(/<li.*?\/em>/gi); //注意：IE浏览器innerHTML会遗漏n-1个“</li>”标签

    arr.sort(function(a, b) {

        var reg = reg || function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};

        return reg(b) - reg(a)

    });

    obj.innerHTML = arr.join("</li>") + "</li>";

}

</script>

prototyper 2012-04-05

打赏
举报



<ul id="ul">

    <li>小王<em>74</em></li>

    <li>小李<em>65</em></li>

    <li>小张<em>56</em></li>

    <li>小周<em>84</em></li>

    <li>小艾<em>63</em></li>

</ul>

<input type="button" value="TEST" onclick="sortTable()">



<script type=text/javascript>

function sortTable() {

    var obj = document.getElementById("ul");

    var arr = obj.innerHTML.match(/<li.*?\/em>/gi); //注意：IE浏览器innerHTML会遗漏n-1个“</li>”标签

    arr.sort(function(a, b) {

        var reg = function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};

        return reg(b) - reg(a)

    });

    obj.innerHTML = arr.join("</li>") + "</li>";

}

</script>