在这个列子中,练习了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>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>5</td>
<td>eee</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>4</td>
<td>ddd</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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,就说这些………………
标签:
table排序

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。