javascrip 中的排序用法与表格相结合

最新推荐文章于 2025-08-20 13:47:22 发布

原创最新推荐文章于 2025-08-20 13:47:22 发布 · 237 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的JavaScript程序，用于对HTML表格中的数据进行排序。通过点击按钮触发排序功能，实现表格内容按照第一列升序排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function ()
        {
            var obton = document.getElementById("b");
            var otab = document.getElementById("tab");
            obton.onclick = function ()
            {
                var arr = []
                for(var i =0;i<otab.tBodies[0].rows.length;i++)
                {
                    arr[i] = otab.tBodies[0].rows[i]
                };
              
                arr.sort(function(str1,str2)
                          {
                              var n1 = str1.cells[0].innerHTML
                              var n2 = str2.cells[0].innerHTML
                              return n1-n2
                          });

                for(var i = 0;i<arr.length;i++)
                {
                    otab.tBodies[0].appendChild(arr[i])
                };

            }


        }

    </script>
</head>
<body>
<input id = b type="button" value="排序">
<table id=tab border="1" width="500">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    </thead>
    <tr>
        <td>2</td>
        <td>xxa</td>
        <td>26</td>
    </tr>

    <tr>
        <td>1</td>
        <td>sda</td>
        <td>65</td>
    </tr>
    <tr>
        <td>4</td>
        <td>asdf</td>
        <td>56</td>
    </tr>
    <tr>
        <td>6</td>
        <td>asdfaw</td>
        <td>44</td>
    </tr>
    <tr>
        <td>9</td>
        <td>asdwwdaa</td>
        <td>88</td>
    </tr>
</table>