无感五 2017-12-13 08:41 采纳率: 50%
浏览 912
已采纳

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

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

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

 <!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条回答 默认 最新

  • Go 旅城通票 2017-12-13 09:00
    关注
     <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题？

悬赏问题

  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号