Heim > Web-Frontend > js-Tutorial > javascript 实现简单的table排序及table操作练习_javascript技巧

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

WBOY
Freigeben: 2016-05-16 17:45:02
Original
1062 Leute haben es durchsucht

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

复制代码 代码如下:





table排序



































2 bbb    
5 eee    
3 ccc    
4 ddd    
1 aaa    


<script> <BR>window.onload = function () { <BR>var oTable = document.getElementById('tableTest'); <BR>var oTbody = oTable.tBodies[0]; <BR>var oBtn = document.getElementById('sort'); <BR>var arr = [];//用来存放每一个tr <BR>var isAsc = true;//用来判断升序,还是降序 <BR>oBtn.onclick = function () { <BR>for (var i = 0; i < oTbody.rows.length; i++ ) { <BR>arr[i] = oTbody.rows[i];//这里是把每一个tr存放到一个数组,而不是排序的依据(这里是cells[0].innerHTML) <BR>} <BR>//数组根据cells[0].innerHTML来排序 <BR>arr.sort(function (td1, td2){ <BR>if(isAsc) { <BR>return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML); <BR>} else { <BR>return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML); <BR>} <BR>}); <BR>//把排序后的tr 重新插入tbody <BR>for(var j =0; j < arr.length; j++ ) { <BR>oTbody.appendChild(arr[j]); <BR>} <BR>//判断升序,降序 <BR>isAsc = !isAsc; <BR>} <BR>} <BR></script>



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








3 ccc    


如果,你firebug查看一下代码,你会发现会多出一个tbody来,明明源代码是没有的
这是为毛?!
其实,table的真正结构是:table中也包括:thead、tbody、tfoot,其中tbody是可以多个的
回到主题上来:
javascript中有关table元素的属性、方法:
caption:保存着对元素(如果有)的指针
tBodies:是一个 元素的HTMLCollection
tFoot:保存着对 元素(如果有)的指针
tHead:保存着对元素(如果有)的指针
rows:是一个表格中所有行的HTMLCollection
createTHead():创建元素,将其放到表格中,并返回引用
createTFoot():创建 元素,将其放到表格中,并返回引用
createCaption():创建元素,将其放到表格中,并返回引用
deleteTHead():删除 元素
deleteTFoot():删除 元素
deleteCaption():删除元素
deleteRow(pos):删除指定位置行
insertRow(pos):向rows集合中指定位置插入一个行
有关tbody的属性、方法
rows:保存着tbody所有行的HTMLCollection
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows的集合中的指定位置插入一行,并返回对新插入行的引用
有关tr的属性、方法
cells:保存着tr所有td(单元格)的HTMLCollection
deleteCell(pos):删除指定位置的单元格
insetCell(pos):向cells的集合中的指定位置插入一个单元格,并返回对该单元格的引用
OK,就说这些………………
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage