JavaScript实现table排序

最新推荐文章于 2023-04-26 14:27:49 发布

pppjf

最新推荐文章于 2023-04-26 14:27:49 发布

阅读量618

点赞数

分类专栏： JavaScript 文章标签： javascript dom 对象

本文链接：https://blog.csdn.net/qq_31359337/article/details/67639553

版权

前段时间一道笔试题，假设有一个记录成绩单的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>
                <

最低0.47元/天解锁文章

pppjf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现table排序

前段时间一道笔试题，假设有一个记录成绩单的table,是让我们说说如何实现点击一个位置，然后对table按照其中成绩按顺序排列，再点击一次就可以按倒序排列。当时刚接触DOM不懂，现在刚刚接触了一点，就自己试着实现一下，心里也是知道必然会有很多问题，而且方法可能会很蠢。我的方法先获取table对象，再使用rows数组获取table[0]的每一行信息建立数组score,获取每一行的td的内容，本例
复制链接

扫一扫