记录一道JS笔试题

最新推荐文章于 2022-10-18 16:40:00 发布

asd5555621

最新推荐文章于 2022-10-18 16:40:00 发布

阅读量360

点赞数

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

在牛客网做到这一题的时候，碰到一些问题，记录一下。题目很简单，但是第一个思路遇到了一些问题：使用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 οnclick="sortTable(this.innerHTML,increase)">name</td>
			<td οnclick="sortTable(this.innerHTML,increase)">strength</td>
			<td οnclick="sortTable(this.innerHTML,increase)">agility</td>
			<td οnclick="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 dom
	for(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