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

在这个列子中，练习了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，就说这些………………

赞 (0)

相关推荐

  • javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)

    首先创建html页面为sort.html ,并把下面的内容复制进去 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • javascript table排序 这个更简单了，不用改变现在的表格结构

    JavaScript实现可自定义排序的表格 - BODY { FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif } P { FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px } .tableWidget_headerCell { BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; C

  • 实现超用户体验 table排序javascript实现代码

    实现超用户体验 table排序javascript实现代码

    以前我在网上总会看类似这种的JS效果: 点击编辑时: (不好意思哈,图在文章最后面) 这种列表与编辑都在同一页的效果,确实很好,能够给用户带来意想不到的美好体验.可是它是怎么实现的呢? 其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的.因此我抽了点时间来实现它.当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是一个思路问题,下面我会具体的写是怎么实现的. 总体思路:给<TR>一个ID,以显示与隐藏来实现这种效果.

  • 一实用的实现table排序的Javascript类库

    一个Javascript 的类库,用于table内容排序.使用很方便,不用每次都去调用数据库了. 特别适合多表查询的排序.加上<tbody>的style.display 切换,也可以实现分页. 效果演示 用法: 1.添加JS <SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT> 2.添加TABLE,注意的是:一定要有ID,class为"sortable&q

  • javascript实现Table排序的方法

    本文实例讲述了javascript实现Table排序的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • JavaScript Table排序 2.0 (更新)

    近来还是那么忙,趁五一更新一下程序吧. 这个版本主要增加和改进了以下东西: 1,对字符串改用localeCompare来比较: 2,一次排序中能使用多个排序对象(用于值相等时再排序): 3,修正一些发现的问题: 4,改进程序结构,个人觉得是更灵活更方便了: 5,增加bool类型比较: 6,添加attribute/property的内容: 7,修正ie6/7的radio/checkbox状态恢复bug: 8,增加自定义取值函数. Table 排序 .odTable { width:500px; b

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

    在这个列子中,练习了table的操作,主要有:tBodies.rows.cells,还有有关数组的排序方法:sort 先上代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table排序</title> </head> <body> <table id="tableTest&q

  • javascript 通用简单的table选项卡实现

    javascript 通用简单的table选项卡实现

    第一步:引用table.js 复制代码 代码如下: <script type="text/javascript" src="table.js"> </script> 第二步:定义选中的样式,比如"active",应用选项卡的块的ID,比如"sidebar",默认被选中的序号,比如第一个"0": 第三步:调用函数: 复制代码 代码如下: <script type="te

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • JavaScript实现将xml转换成html table表格的方法

    本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen

  • jquery实现的table排序功能示例

    jquery实现的table排序功能示例

    本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co

  • js table排序类代码

    table排序类 .fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; font-size:12px;} .fu_list thead td{background-color:#ebebeb;} .fu_list td{padding:5px;} .fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-de

随机推荐