JavaScript实现table排序

最新推荐文章于 2025-06-18 16:07:04 发布

原创最新推荐文章于 2025-06-18 16:07:04 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom #对象

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用JavaScript实现表格数据排序的方法。通过获取table对象，利用rows数组遍历每一行，根据成绩td内容创建score数组并排序。为了避免直接操作table导致的数组同步问题，引入额外的text数组存储innerHTML。此外，文章还提到了`sort()`函数的使用以及在更新table时需要注意的`appendChild`属性，强调了节点复制的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间一道笔试题，假设有一个记录成绩单的table,是让我们说说如何实现点击一个位置，然后对table按照其中成绩按顺序排列，再点击一次就可以按倒序排列。当时刚接触DOM不懂，现在刚刚接触了一点，就自己试着实现一下，心里也是知道必然会有很多问题，而且方法可能会很蠢。

我的方法

先获取table对象，再使用rows数组获取table[0]的每一行信息
建立数组score,获取每一行的td的内容，本例其中td有三个，分别记录了when,where和score
根据td中的score对数组进行排序
建立一个二维数组text存储score中每一个td的innerHTML
用数组text来修改table中的内容，根据标记ifg判断是正序还是倒序
注意：第四步本来是没有的，最初的想法是将排好序的score直接赋值给table，用来修改其内容，然后，果然就踩坑了；因为开始我按照以前的经验，这样是没有问题的，但是，每次我的排序都会有问题，调试发现，一旦修改了table中的某一行的内容，那么score数组中的某些数据也会发生改变!也就是说，score数组是和table有关联的，修改table会影响到score,同时修改score也会改变table,果然是很蠢的方法，但是现阶段我所学只能让我这样做，不得已添加了一个数组来存储score中各个元素的innerHTML，也就是实际用来更新table的数据，这个是不会随着table改变而改变的。
HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Cities</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" />
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/clickScore.js"></script>
</head>

<body>
    <table>
        <caption>Itinerary</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>Where</th>
                <th id="scores">Scores</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>June 9th</td>
                <td>Portland,
                    <abbr title="Oregon">OR</abbr>
                </td>
                <td>87</td>
            </tr>
            <tr>
                <td>June 10th</td>
                <td>Nanchang ,
                    <abbr title="Jiangxi">NC</abbr>
                </td>
                <td>80</td>
            </tr>
            <tr>
                <td>June 12th</td>
                <td>Sacramento,
                    <abbr title="California">CA</abbr>
                </td>
                <td>71</td>
            </tr>
            <tr>
                <td>June 30th</td>
                <td>Seattle,
                    <abbr title="Washington">WA</abbr>
                </td>
                <td>84</td>
            </tr>
            <tr>
                <td>June 30th</td>
                <td>Beijing,
                    <abbr title="Beijing">BJ</abbr>
                </td>
                <td>90</td>
            </tr>
            <tr>
                <td>June 12th</td>
                <td>Nanjing,
                    <abbr title="Jiangshu">NJ</abbr>
                </td>
                <td>80</td>
            </tr>
            <tr>
                <td>June 10th</td>
                <td>Shanghai,
                    <abbr title="Huadong">SH</abbr>
                </td>
                <td>78</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

clickScore函数

function clickScore() {
    // body... 
    if (!document.getElementById("scores")) return false;
    var scores = document.getElementById("scores");
    scores.onmouseover = function() {
        this.style.backgroundColor = "#2aa8c6";
        this.style.cursor = "pointer";
    };
    scores.onmouseout = function() {
        this.style.backgroundColor = "#99cccc";
    };
    var ifg = true;
    scores.onmouseup = function() {
        var tables = document.getElementsByTagName("table");
        var rows = tables[0].getElementsByTagName("tr");
        var score = [];
        for (var i = 1; i < rows.length; i++) {
            score[i] = rows[i].getElementsByTagName("td");
        }
        for (i = 2; i < score.length; i++) {
            var temp = score[i][2].innerHTML;
            var temps = score[i];
            for (var j = i - 1; j >= 1; j--) {
                var now = score[j][2].innerHTML;
                if (temp < now) {
                    score[j + 1] = score[j];
                } else {
                    break;
                }
            }
            score[j + 1] = temps;
        }
        var text = [];
        for (i = 1; i < rows.length; i++) {
            text[i] = [];
        }
        for (i = 1; i < rows.length; i++) {
            for (j = 0; j < score[i].length; j++) {
                text[i][j] = score[i][j].innerHTML;
            }
        }
        if (ifg) {
            for (i = 1; i < rows.length; i++) {
                for (j = 0; j < score[i].length; j++) {
                    rows[i].cells[j].innerHTML = text[i][j];

                }
            }

        } else {
            for (i = 1; i < rows.length; i++) {
                for (j = 0; j < score[i].length; j++) {
                    rows[i].cells[j].innerHTML = text[rows.length - i][j];
                }
            }
        }
        ifg = !ifg;
    };
}
addLoadEvent(clickScore);

附上一个很好的方法

注意sort()的功能
appendChild有一个属性:

如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.
这个属性存在所以可以使用oTbody.appenChild更新table

    <script>
    window.onload = function() {
        var oTable = document.getElementById('tableTest');
        var oTbody = oTable.tBodies[0];
        var oBtn = document.getElementById('sort');
        var arr = []; //用来存放每一个tr 
        var isAsc = true; //用来判断升序，还是降序 
        oBtn.onclick = function() {
            for (var i = 0; i < oTbody.rows.length; i++) {
                arr[i] = oTbody.rows[i]; //这里是把每一个tr存放到一个数组，而不是排序的依据（这里是cells[0].innerHTML） 
            }
            //数组根据cells[0].innerHTML来排序 
            arr.sort(function(td1, td2) {
                if (isAsc) {
                    return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML);
                } else {
                    return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML);
                }
            });
            //把排序后的tr 重新插入tbody 
            for (var j = 0; j < arr.length; j++) {
                oTbody.appendChild(arr[j]);
            }
            //判断升序，降序 
            isAsc = !isAsc;
        }
    }
    </script>