JavaScript 如何实现页面既有的数据的排序.现在又一个页面，里面有个table表数据，大致的表格如下----------
JavaScript 如何实现页面既有的数据的排序.
现在又一个页面，里面有个table表数据，大致的表格如下
-------------------------------
| 姓名 | ..... | 得分 |
--------------------------------
| 张三 | ..... | 1000 |
--------------------------------
| 李四 | ..... | 4490 |
--------------------------------
| 王五 | ..... | 8760 |
--------------------------------
这里的得分人员手工打分的，现在的需求就是，当把这些人的得分都打好以后，
我点击一个按钮，这个按钮实现的功能就是: 将这些数据按照得分由高到低的顺序
排个序。这是PM要求的，我JS不在行，我说我在后台做吧，他说就用JS 省资源，顺便
让我学习一下，求朋友们给答案，就是那个按钮的具体代码活着详细的思路也行。
[解决办法]
- HTML code
<!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>
[解决办法]
- 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="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>
[解决办法]
var reg = reg || function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};
[解决办法]
- HTML code
<!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>
[解决办法]
[解决办法]
- HTML code
<!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>