JavaScript 怎么实现页面既有的数据的排序-JavaSript-爱易网页

JavaScript 怎么实现页面既有的数据的排序

日期：2014-05-16　浏览次数：20341 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript 怎么实现页面既有的数据的排序

相关资料更多>

推荐阅读更多>