q2617426
无感五
采纳率73.3%
2017-12-13 08:41

下面这段代码如何改成自动从大到小排版

40
已采纳

图片说明这是打开页面的默认排序,但是我想要的是,一打开页面不通过点击就默认按里面的数值大小来排序
图片说明

现在这段代码是需要点击从能实现排序的,请问一下如何改成自动从大到小排序

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<style type="text/css">
table {
    margin: 0 auto;
    border: 1px solid black;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function ()
    {
       var table = document.getElementById ('table');
       var tbody = table.tBodies[0];
       var rows = tbody.rows;
       var cells = rows[0].cells;
       for ( var j = 0; j < cells.length; j++)
       {
        cells[j].onclick = function ()
           {
               var asc = this.asc = !!this.asc ? -this.asc : -1;
               var array = [];
               array.index = this.cellIndex;
               for ( var i = 1; i < rows.length; i++)
               {
                   array.push (rows[i]);
               }
               array.sort (function (a, b)
               {
                   var n1 = a.cells[array.index].firstChild.nodeValue;
                   var n2 = b.cells[array.index].firstChild.nodeValue;
                   if (n1 > n2)
                   {
                       return asc;
                   }
                   else if (n1 < n2)
                   {
                       return -asc;
                   }
                   else
                   {
                       return 0;
                   }
               });

               for ( var i = 0; i < array.length; i++)
               {
                tbody.appendChild (array[i]);
               }
           }
       }
    }
</script>
</head>
<body style="text-align: center;">
    <table id="table">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>98</td>
            <td>李勇</td>
        </tr>
        <tr>
            <td>94</td>
            <td>王博</td>
        </tr>
        <tr>
            <td>705</td>
            <td>刘海</td>
        </tr>
        <tr>
            <td>1025</td>
            <td>陈锋</td>
        </tr>
    </table>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

9条回答

  • showbo GoCityPass新加坡曼谷通票 4年前
     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>HelloWorld</title>
        <style type="text/css">
            table {
                margin: 0 auto;
                border: 1px solid black;
                border-collapse: collapse;
            }
    
            td {
                border: 1px solid black;
            }
        </style>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var table = document.getElementById('table');
                var rows = [];
                for (var i = 1; i < table.rows.length; i++) rows.push(table.rows[i]);
                function sortRow() {
                    var cellIndex = this.cellIndex, isInt = /^\d+$/.test(rows[0].cells[cellIndex].innerHTML), asc = this.asc;
                    rows.sort(function (r1,r2) {
                        if (isInt) return parseInt((asc ? r1 : r2).cells[cellIndex].innerHTML) - parseInt((asc ? r2 : r1).cells[cellIndex].innerHTML);
    
                        return (asc ? r1 : r2).cells[cellIndex].innerHTML.localeCompare((asc ? r2 : r1).cells[cellIndex].innerHTML)
                    });
                    for (var i = 0; i < rows.length; i++) table.appendChild(rows[i]);
                    this.asc = !asc;
    
                }
                for (var i = 0; i < table.rows[0].cells.length; i++) table.rows[0].cells[i].onclick = sortRow;
            }
        </script>
    </head>
    <body style="text-align: center;">
        <table id="table">
            <tr>
                <td>编号</td>
                <td>姓名</td>
            </tr>
            <tr>
                <td>98</td>
                <td>李勇</td>
            </tr>
            <tr>
                <td>94</td>
                <td>王博</td>
            </tr>
            <tr>
                <td>705</td>
                <td>刘海</td>
            </tr>
            <tr>
                <td>1025</td>
                <td>陈锋</td>
            </tr>
        </table>
    </body>
    </html>
    
    点赞 7 评论 复制链接分享
  • yuzhibo1127 yuzhibo1127 4年前
    window.onload = function () { var table = document.getElementById ('table'); var tbody = table.tBodies[0]; var rows = tbody.rows; var row, rowNext, num, numNext; for(var i=1,l=rows.length-1;i<l;i++){ row=rows[i]; num=row.children[0].innerText-0; for(var ii=i+1,ll=rows.length;ii<ll;ii++){ rowNext=rows[ii]; numNext=rowNext.children[0].innerText-0; if(num<numNext){//交换 row=rowNext; } } tbody.insertBefore(row,rows[i]); } }
    点赞 评论 复制链接分享
  • hailan840221 hailan840221 4年前

    用sort()函数实现

    点赞 评论 复制链接分享
  • zhaoyf7746 zhaoyf7746 4年前

    csdn评论转义代码,等下

    <script>
    function sort(){  sort 代码。。。}
    </script>
    <body onload="sort()">
    ....
    </body>
    
    
    点赞 评论 复制链接分享
  • zhaoyf7746 zhaoyf7746 4年前
    function sort(){ sort 实现。。。}


    .....
    点赞 评论 复制链接分享
  • zhaoyf7746 zhaoyf7746 4年前

    <!DOCTYPE HTML>



    HelloWorld table { margin: 0 auto; border: 1px solid black; border-collapse: collapse; } td { border: 1px solid black; } **function sort()**{ var table = document.getElementById ('table'); var tbody = table.tBodies[0]; var rows = tbody.rows; var cells = rows[0].cells; for ( var j = 0; j < cells.length; j++) { cells[j].onclick = function () { var asc = this.asc = !!this.asc ? -this.asc : -1; var array = []; array.index = this.cellIndex; for ( var i = 1; i < rows.length; i++) { array.push (rows[i]); } array.sort (function (a, b) { var n1 = a.cells[array.index].firstChild.nodeValue; var n2 = b.cells[array.index].firstChild.nodeValue; if (n1 > n2) { return asc; } else if (n1 < n2) { return -asc; } else { return 0; } }); for ( var i = 0; i < array.length; i++) { tbody.appendChild (array[i]); } } } }
























    编号 姓名
    98 李勇
    94 王博
    705 刘海
    1025 陈锋


    点赞 评论 复制链接分享
  • m0_37852904 阡路陌人 4年前

    字符串不能进行大小的比较的,先将字符串进行转义再进行比较

    点赞 评论 复制链接分享
  • zhaoyf7746 zhaoyf7746 4年前

    你已经实现了点击排序就已经完成了啊
    点击是一个事件,页面加载也是一个事件
    你再body标签上加个onload就好了

    点赞 评论 复制链接分享
  • qq_35527911 qq_35527911 4年前

    <!DOCTYPE html>



    HelloWorld
    <br> table {<br> margin: 0 auto;<br> border: 1px solid black;<br> border-collapse: collapse;<br> }</p> <pre><code> td { border: 1px solid black; } &lt;/style&gt; &lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; window.onload = function () { var table = document.getElementById(&#39;table&#39;); var rows = []; for (var i = 1; i &lt; table.rows.length; i++) rows.push(table.rows[i]); function sortRow() { var cellIndex = this.cellIndex, isInt = /^\d+$/.test(rows[0].cells[cellIndex].innerHTML), asc = this.asc; rows.sort(function (r1,r2) { if (isInt) return parseInt((asc ? r1 : r2).cells[cellIndex].innerHTML) - parseInt((asc ? r2 : r1).cells[cellIndex].innerHTML); return (asc ? r1 : r2).cells[cellIndex].innerHTML.localeCompare((asc ? r2 : r1).cells[cellIndex].innerHTML) }); for (var i = 0; i &lt; rows.length; i++) table.appendChild(rows[i]); this.asc = !asc; } for (var i = 0; i &lt; table.rows[0].cells.length; i++) table.rows[0].cells[i].onclick = sortRow; } &lt;/script&gt; </code></pre> <p></head><br> <body style="text-align: center;"><br> <table id="table"><br> <tr><br> <td>编号</td><br> <td>姓名</td><br> </tr><br> <tr><br> <td>98</td><br> <td>李勇</td><br> </tr><br> <tr><br> <td>94</td><br> <td>王博</td><br> </tr><br> <tr><br> <td>705</td><br> <td>刘海</td><br> </tr><br> <tr><br> <td>1025</td><br> <td>陈锋</td><br> </tr><br> </table><br> </body><br> </html></p>
    点赞 评论 复制链接分享

相关推荐