首页 / JAVASCRIPT / javascript 实现简单的table排序及table操作练习

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 实现简单的table排序及table操作练习，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3030字，纯文字阅读大概需要5分钟。

内容图文

在这个列子中，练习了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的集合中的指定位置插入一个单元格，并返回对该单元格的引用 
OK，就说这些………………

内容总结

以上是互联网集市为您收集整理的javascript 实现简单的table排序及table操作练习全部内容，希望文章能够帮你解决javascript 实现简单的table排序及table操作练习所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367551.html

来源：【匿名】