记录一道JS笔试题

来源：互联网发布：浪潮软件官网编辑：程序博客网时间：2024/06/05 02:32

如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

在牛客网做到这一题的时候，碰到一些问题，记录一下。题目很简单，但是第一个思路遇到了一些问题：使用JS的getElementByTagName方法从DOM中获取tr的所有数据。假设一个变量var tableRows = document.getElementsByTagName("tr");我在排序的时候直接使用tableRows作为一个数组传入排序函数，结果运行完一看，tableRows里面的元素一个位置也没有改变。感觉十分奇怪。

先记录一个大致的猜测，也是网友提供的：

getElementsByTag() returns a NodeList instead of an Array. You can convert a NodeList to an Array but note that the array will be another object, so reversing it will not affect the DOM nodes position.

var listNodes = document.getElementById("myDivHolderId").getElementsByTagName("img");var arrayNodes = Array.slice.call(listNodes, 0);arrayNodes.reverse();

In order to change the position, you will have to remove the DOM nodes and add them all again at the right position.

Array.prototype.slice.call(arrayLike, 0) is a great way to convert an array-like to an array, but if you are using a JavaScript library, it may actually provide a even better/faster way to do it. For example, jQuery has $.makeArray(arrayLike).

You can also use the Array methods directly on the NodeList:

Array.prototype.reverse.call(listNodes);总之意思就是使用我们的getElement获得的是一个nodeList，不是组数，想要使用还要转换！！！

nodeList object in JS

http://stackoverflow.com/questions/5501433/nodelist-object-in-javascript

A NodeList is collection of DOM elements. It's like an array (but it isn't). To work with it, you must turn it into a regular javascript array. The following snippet can get the job done for you.

var nodeList = document.getElementsByClassName('.yourClass'),    nodeArray = [].slice.call(nodeList);

定义和用法 slice() 方法可从已有的数组中返回选定的元素。

语法 arrayObject.slice(start,end)

Array 对象方法

方法描述concat()连接两个或更多的数组，并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素，并返回新的长度。reverse()颠倒数组中元素的顺序。shift()删除并返回数组的第一个元素slice()从某个已有的数组返回选定的元素sort()对数组的元素进行排序splice()删除元素，并向数组添加新元素。toSource()返回该对象的源代码。toString()把数组转换为字符串，并返回结果。toLocaleString()把数组转换为本地数组，并返回结果。unshift()向数组的开头添加一个或更多元素，并返回新的长度。valueOf()返回数组对象的原始值

然后，我把数据从innerHTML中提取出来，自己构造了数组进行排序，结果成功排序了。

<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body><table><tr style="background-color:grey"><td onclick="sortTable(this.innerHTML,increase)">name</td><td onclick="sortTable(this.innerHTML,increase)">strength</td><td onclick="sortTable(this.innerHTML,increase)">agility</td><td onclick="sortTable(this.innerHTML,increase)">intelligence</td></tr><tr><td>德鲁伊</td><td>17</td><td>24</td><td>13</td></tr><tr><td>月之骑士</td><td>15</td><td>22</td><td>16</td></tr><tr><td>众神之王</td><td>19</td><td>15</td><td>20</td></tr><tr><td>流浪剑客</td><td>23</td><td>15</td><td>14</td></tr></table></body></html><style>td{  text-align:center;  width:100px;}</style><script>function sortTable(sortType,increase){var sortValue = -1;switch(sortType){case "name":sortValue = 0;break;case "strength":sortValue = 1;break;case "agility":sortValue = 2;break;case "intelligence":sortValue = 3;break;default:break;}var tableNodes = document.getElementsByTagName("tr");var tableRows = [];for(var i = 1;i<tableNodes.length;i++){var rowCells = [];for(var j = 0;j<tableNodes[0].cells.length;j++){rowCells[j] = tableNodes[i].cells[j].innerHTML;}tableRows[i-1] = rowCells;}quicksort(tableRows,0,tableRows.length-1,sortValue);console.log(tableRows);if(!increase[sortValue]){tableRows.reverse();increase[sortValue] = true;}else{increase[sortValue] = false;}//update the domfor(var i = 1;i < tableNodes.length;i++){for(var j = 0; j < tableNodes[0].cells.length;j++){tableNodes[i].cells[j].innerHTML = tableRows[i-1][j];} }}function quicksort(array,begin,end,sortBy){if(array === null || begin >= end || sortBy === undefined){return;}if(sortBy === 0){array.sort();}else{var mid = quicksortCore(array,begin,end,sortBy);quicksort(array,begin,mid-1,sortBy);quicksort(array,mid+1,end,sortBy);}}function quicksortCore(array,begin,end,sortBy){if(sortBy !==0){var pivot = parseInt(array[begin][sortBy]);}else{var pivot = array[begin][sortBy];}var i = begin;for(var j = begin + 1;j <= end;j++){if(sortBy !== 0){if(parseInt(array[j][sortBy]) < pivot){i++;var temp = array[i];array[i] = array[j];array[j] = temp;}}else{//todo string compare.}}var temp = array[begin];array[begin] = array[i];array[i] = temp;return i;}var increase = [false,false,false,false];//sortTable("intelligence");//var array = [0,9,8,74,6,52,44,344,2,14,-2,0];//quicksort(array,0,array.length-1);//console.log(array);</script>

完成这道题目，复习了DOM cells集合：

定义和用法

cells 集合返回表格中所有单元格的一个数组。

语法

tableObject.cells[]

parseInt()函数

定义和用法

parseInt() 函数可解析一个字符串，并返回一个整数。

语法

parseInt(string, radix)

数组的声明

var array = [];

JS的传值或引用

http://www.zhihu.com/question/26042362

table的格式

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<th>用在表头

<table border="1">  <tr>    <th>Company</th>    <th>Address</th>  </tr>  <tr>    <td>Apple, Inc.</td>    <td>1 Infinite Loop Cupertino, CA 95014</td>  </tr></table>

array的sort()方法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

http://www.nowamagic.net/librarys/veda/detail/1715

arrDemo.sort(function(a,b){return a>b?1:-1});//从小到大排序

alert(arrDemo);//10,50,51,100

arrDemo.sort(function(a,b){return a<b?1:-1});//从大到小排序

alert(arrDemo);//100,51,50,10

复习了一下JS的传值he

0 0