JavaScript实现table排序

本文介绍了使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值