前段时间一道笔试题,假设有一个记录成绩单的 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="CalifZ喎�" /kf/ware/vc/ " target="_blank " class="keylink
- ">vcm5pYQ==">
- 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.onmouseo/" target="_blank">seover = 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 有一个属性:
这个属性存在所以可以使用 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>
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-31/19742609.html