javascript 实现简单的table排序及table操作练习

2013-01-08 08:39:41 | 【

在这个列子中,练习了table的操作,主要有:tBodies、rows、cells,还有有关数组的排序方法:sort

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>table排序</title> 
</head> 
<body> 
<table id="tableTest" width="400" border="1"> 
<tbody> 
<tr> 
<td>2</td> 
<td>bbb</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>5</td> 
<td>eee</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>3</td> 
<td>ccc</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>4</td> 
<td>ddd</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>1</td> 
<td>aaa</td> 
<td> </td> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<input type="button" id="sort" value="表格排序" /> 
<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> 
</body> 
</html>


下面啰嗦一些相关的知识点: 
我们都知道,平时操作一般的DOM可以getElementsByTagName、getElementById云云来获取相关节点 
在table中当然这种方法也可以实现 
显然,这样操作会很麻烦 
所以,对于table我们可以用另一套方法、属性来操作: 
在这之前,先说一些有关table的东东: 
平时写table相信很多人会直接这么写: 


<table id="tableTest" width="400" border="1"> 
<tr> 
<td>3</td> 
<td>ccc</td> 
<td> </td> 
<td> </td> 
</tr> 
</table>


如果,你firebug查看一下代码,你会发现会多出一个tbody来,明明源代码是没有的 
这是为毛?! 
其实,table的真正结构是:table中也包括:thead、tbody、tfoot,其中tbody是可以多个的 
回到主题上来: 
javascript中有关table元素的属性、方法: 
caption:保存着对<caption>元素(如果有)的指针 
tBodies:是一个<tbody>元素的HTMLCollection 
tFoot:保存着对<tfoot>元素(如果有)的指针 
tHead:保存着对<thead>元素(如果有)的指针 
rows:是一个表格中所有行的HTMLCollection 
createTHead():创建<thead>元素,将其放到表格中,并返回引用 
createTFoot():创建<tfoot>元素,将其放到表格中,并返回引用 
createCaption():创建<caption>元素,将其放到表格中,并返回引用 
deleteTHead():删除<thead>元素 
deleteTFoot():删除<tfoot>元素 
deleteCaption():删除<caption>元素 
deleteRow(pos):删除指定位置行 
insertRow(pos):向rows集合中指定位置插入一个行 
有关tbody的属性、方法: 
rows:保存着tbody所有行的HTMLCollection 
deleteRow(pos):删除指定位置的行 
insertRow(pos):向rows的集合中的指定位置插入一行,并返回对新插入行的引用 
有关tr的属性、方法: 
cells:保存着tr所有td(单元格)的HTMLCollection 
deleteCell(pos):删除指定位置的单元格 
insetCell(pos):向cells的集合中的指定位置插入一个单元格,并返回对该单元格的引用


热门标签:

  • 表格
  • 排序


推荐资源