标签：style blog http color io os ar java for
面试题真的是查漏补缺，尤其是大公司大神们出的题目，总能告诉你某些地方你是学的有多么的不扎实……
根据各科成绩排序：
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度面试——成绩排名</title> <style> *{margin:0;padding:0;} table{border-collapse:collapse;margin:0 auto;} tbody tr{cursor:pointer;} th,td{width:200px;height:30px;border:1px solid #000;} td{text-align:center;} </style> </head> <body> <table id="table"> <thead> <tr> <th>排名</th> <th>姓名</th> <th onclick="paixu(2)">语文</th> <th onclick="paixu(3)">数学</th> <th onclick="paixu(4)">外语</th> <th>总和</th> </tr> </thead> <tbody> <tr> <td></td> <td>陈小妞</td> <td>76</td> <td>80</td> <td>87</td> <td></td> </tr> <tr> <td></td> <td>陈莲莲</td> <td>98</td> <td>43</td> <td>78</td> <td></td> </tr> <tr> <td></td> <td>Alien</td> <td>90</td> <td>53</td> <td>86</td> <td></td> </tr> <tr> <td></td> <td>陈晓瑞</td> <td>80</td> <td>43</td> <td>87</td> <td></td> </tr> <tr> <td></td> <td>高健</td> <td>43</td> <td>87</td> <td>98</td> <td></td> </tr> <tr> <td></td> <td>张媛媛</td> <td>60</td> <td>54</td> <td>84</td> <td></td> </tr> <tr> <td></td> <td>郑媛媛</td> <td>34</td> <td>34</td> <td>67</td> <td></td> </tr> <tr> <td></td> <td>秦优</td> <td>54</td> <td>87</td> <td>87</td> <td></td> </tr> <tr> <td></td> <td>陈书贞</td> <td>65</td> <td>87</td> <td>67</td> <td></td> </tr> <tr> <td></td> <td>陈杲</td> <td>100</td> <td>100</td> <td>100</td> <td></td> </tr> </tbody> </table> </body> </html>
最开始的时候，就是想着根据DOM中表格的操作获取第一个tBody的rows，然后写一个排序规则，根据rows中某一列的具体值排序整个rows，就是利用数组的sort方法，自己写排序规则，但是最后执行的时候说是不认识sort，进行了数组检测才发现原来获取到的rows根本就不是数组（Array），而是集合（Collection）。经过多番认证后，更为震惊的结果是，类似于getElementsByTagName等的这些方法也都是集合，所以数组的方法sort是没有办法应用的。泪奔啊……
然后就想起了冒泡排序，就想着，既然它没有给定的排序规则，就想着自己定义一个排序方法。
接下来当然是激动地写起了冒泡排序（http://zh.wikipedia.org/wiki/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F#JavaScript.E5.AE.9E.E7.8E.B0），最后的确是当点击标题的时候，下边的内容会排序会发生相应的变化，但是但是，差点被迷惑，偶然发现根本就不是升序，而是乱序的，
function $(id){ return document.getElementById ? document.getElementById(id) : id; } var oTable = $("table"); var aTh = oTable.tHead.rows[0].cells; var aRow = oTable.tBodies[0].rows; function bubbleSort(aRow,index){ var i=aRow.length, j; var temp; while(i>0){ for(j=0;j<i-1;j++){ var v1 = parseInt(aRow[j].cells[index].innerHTML); var v2 = parseInt(aRow[j+1].cells[index].innerHTML); console.log("v1:"+v1,"v2:"+v2); debugger; if(v1>v2){ console.log(aRow[j].innerHTML,aRow[j+1].innerHTML);//1 temp = aRow[j]; console.log("temp",temp)//2 aRow[j] = aRow[j+1]; console.log("aRow[j]",aRow[j])//3 aRow[j+1] = temp; console.log("aRow[j+1]",aRow[j+1])//4 console.log(aRow[j].innerHTML,aRow[j+1].innerHTML);//5 } } i--; } return aRow; } function paixu(index){ aRow = bubbleSort(aRow,index); for (var i = 0; i < aRow.length; i++) { oTable.tBodies[0].appendChild(aRow[i]); }; }
代码中的console 注释1 跟 注释5 的结果是一样的，如果两个换位置的话，应该是不同的才对，所以两个没有换位置，然后就更具体地调试，
根据2,3,4的结果发现，这三行根本就没有赋值成功，我靠，再次晕倒。
js得到的集合只能够读取，是不能够设置值的……
但是，当我点击标题的时候为什么会有变化呢？？？
这个问题出现在paixu这个函数中，在for循环中写debugger；看一下……
for (var i = 0; i < aRow.length; i++) {
debugger;
oTable.tBodies[0].appendChild(aRow[i]);
};
上边for循环中的aRow是动态变化的，我靠……再次被雷到……因为小女子真的是不止一次掉入这个神坑无比的大坑了，只能说，历练少……思路不严谨了……
最后还是将这个集合放到数组中，然后利用数组的sort方法好了，突然觉得这样想真的是好简单哦，绕着世界一大圈，发现什么都没干，又回来了……
function $(id){ return document.getElementById ? document.getElementById(id) : id; } var oTable = $("table"); var aTh = oTable.tHead.rows[0].cells; var cRow = oTable.tBodies[0].rows; function paixu(index){ var aRow = []; for (var i = 0; i < cRow.length; i++) { aRow[i] = cRow[i]; }; aRow.sort(function(a,b){ var v1 = parseInt(a.cells[index].innerHTML); var v2 = parseInt(b.cells[index].innerHTML); return v1 - v2; }); for (var i = 0; i < aRow.length; i++) { oTable.tBodies[0].appendChild(aRow[i]); }; }
看着上边的代码，欲哭无泪……
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/bjchenxn/p/4024991.html
