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

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

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

 <!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个回答

 <!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>
showbo
支付宝加好友偷能量挖 回复风一: 自动排序你调用下sortRow方法就行了。 for (var i = 0; i < table.rows[0].cells.length; i++) table.rows[0].cells[i].onclick = sortRow;sortRow.call(table.rows[0].cells[0]);//按照哪个列自己改call的参数   记得采纳
接近 2 年之前 回复
q2617426
无感五 你好啊,我刚刚调试了下,打开页面不能实现自动排序
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 字符串不要用><比较,会按照字符出现顺序进行比较,9》1,所以所以降序时96》1025。数字字符串要转数字后比较。而且字符串用localeCompare比较
接近 2 年之前 回复

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

q2617426
无感五 我刚刚试了下不成功,请问一下应该怎么写呢
接近 2 年之前 回复

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

<!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 陈锋


function sort(){ sort 实现。。。}


.....

csdn评论转义代码,等下

<script>
function sort(){  sort 代码。。。}
</script>
<body onload="sort()">
....
</body>

zhaoyf7746
zhaoyf7746 应该没问题了,看不懂问我吧
接近 2 年之前 回复

用sort()函数实现

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]); } }

<!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>
q2617426
无感五 你好啊,这段代码我使用不了
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!