<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
/* 定义页面整体样式 */
body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
/* 定义table内的字体样式 */
table, td{
font:100% Arial, Helvetica, sans-serif;
}
/* 定义table样式 */
table{
width:100%;
border-collapse:collapse;
margin:1em 0;
}
/* 定义th和td的对齐方式、边距等 */
th, td{
text-align:left;
padding:.5em;
border:1px solid #fff;
}
/* 定义表头所使用的背景图片 */
th{
background:#328aa4 url(tr_back.gif) repeat-x;
color:#fff;
cursor:pointer;
}
/* 定义td的背景色 */
td{
background:#e5f1f4;
}
</style>
<table id='sortTable' cellspacing="0" cellpadding="0">
<tr>
<th onclick='sort(this)'>数字</th>
<th onclick='sort(this)'>英文</th>
<th onclick='sort(this,1)'>汉字</th>
<th onclick='sort(this)'>标题</th>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>啊</td>
<td>Data1</td>
</tr>
<tr>
<td>3</td>
<td>b</td>
<td>哦</td>
<td>Data2</td>
</tr>
<tr>
<td>8</td>
<td>c</td>
<td>饿</td>
<td>Data3</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>一</td>
<td>Data4</td>
</tr>
</table>
</body>
</html>
<script>
var sortTable = document.getElementById('sortTable');
//为数组对象扩展原形方法xsort,该方法接收两个参数
// type 排序类型。值为1时是中文排序,其它数字为默认排序
// direct 排序方向。正序或者反序,默认正序。
Array.prototype.xsort = function(type,direct){
switch(type){
case 1:this.sort(function(a,b){ return a.localeCompare(b) }); break;
default:this.sort();
}
if(direct == undefined)direct = 1;
if(!direct)this.reverse();
}
//排序方法
function sort(obj,sType){
//获取本列原始行顺序数据
var list = [];
//获取本列排序后行顺序数据
var sortedList = [];
var tr = obj.parentNode;
while(tr.nextSibling){
tr = tr.nextSibling;
if(tr.nodeType == 1){
list.push(tr.cells[obj.cellIndex].innerHTML);
sortedList.push(tr.cells[obj.cellIndex].innerHTML);
}
}
//排序方式
if(obj.direct == undefined)
obj.direct = 1;
//改变移动方向
if(obj.direct)
obj.direct = 0;
else
obj.direct = 1;
sortedList.xsort(sType,obj.direct);
var target = [];
//获取排序后行的原坐标
for(var i=0,l=sortedList.length;i<l;i++){
for(var j=0,k=list.length;j<k;j++){
if(sortedList[i] == list[j])
target.push(j+1);
}
}
var cells = [];
//根据坐标获取该列所有td
for(var i=0,l=target.length;i<l;i++){
cells.push(document.getElementById('sortTable').rows[target[i]].cells[obj.cellIndex]);
}
//移动行
for(var i=0,l=list.length;i<l;i++){
//因为表头不能移动所以i+1
document.getElementById('sortTable').moveRow(cells[i].parentNode.rowIndex,i+1);
}
}
//增加鼠标行高亮效果
//增加列头点击效果
</script>1.if(direct == undefined)direct = 1;if(!direct)this.reverse(); if(obj.direct == undefined) obj.direct = 1;
if(obj.direct) obj.direct = 0;
else obj.direct = 1;
这两个地方的direct的值是肯定有联系的,我不大理解的就是,dierct的值他是如何传递的,在TH标签上面引用sort函数的时候并没有dierct这个参数啊,这两段代码的关系到底是怎么样的呢?
2.moveRow 方法,这个方法在IE下面是可以的,但是,FIREFOX OPERA CHOME下面都没有作用,moveRow方法是一个不符合WEB标准的方法吗?是不是要尽量少的去使用者个方法呢?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
/* 定义页面整体样式 */
body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
/* 定义table内的字体样式 */
table, td{
font:100% Arial, Helvetica, sans-serif;
}
/* 定义table样式 */
table{
width:100%;
border-collapse:collapse;
margin:1em 0;
}
/* 定义th和td的对齐方式、边距等 */
th, td{
text-align:left;
padding:.5em;
border:1px solid #fff;
}
/* 定义表头所使用的背景图片 */
th{
background:#328aa4 url(tr_back.gif) repeat-x;
color:#fff;
cursor:pointer;
}
/* 定义td的背景色 */
td{
background:#e5f1f4;
}
</style>
<table id='sortTable' cellspacing="0" cellpadding="0">
<tr>
<th onclick='sort(this)'>数字</th>
<th onclick='sort(this)'>英文</th>
<th onclick='sort(this,1)'>汉字</th>
<th onclick='sort(this)'>标题</th>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>啊</td>
<td>Data1</td>
</tr>
<tr>
<td>3</td>
<td>b</td>
<td>哦</td>
<td>Data2</td>
</tr>
<tr>
<td>8</td>
<td>c</td>
<td>饿</td>
<td>Data3</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>一</td>
<td>Data4</td>
</tr>
</table>
</body>
</html>
<script>
var sortTable = document.getElementById('sortTable');
//为数组对象扩展原形方法xsort,该方法接收两个参数
// type 排序类型。值为1时是中文排序,其它数字为默认排序
// direct 排序方向。正序或者反序,默认正序。
Array.prototype.xsort = function(type,direct){
switch(type){
case 1:this.sort(function(a,b){ return a.localeCompare(b) }); break;
default:this.sort();
}
if(direct == undefined)direct = 1;
if(!direct)this.reverse();
}
//排序方法
function sort(obj,sType){
//获取本列原始行顺序数据
var list = [];
//获取本列排序后行顺序数据
var sortedList = [];
var tr = obj.parentNode;
while(tr.nextSibling){
tr = tr.nextSibling;
if(tr.nodeType == 1){
list.push(tr.cells[obj.cellIndex].innerHTML);
sortedList.push(tr.cells[obj.cellIndex].innerHTML);
}
}
//排序方式
if(obj.direct == undefined)
obj.direct = 1;
//改变移动方向
if(obj.direct)
obj.direct = 0;
else
obj.direct = 1;
sortedList.xsort(sType,obj.direct);
var target = [];
//获取排序后行的原坐标
for(var i=0,l=sortedList.length;i<l;i++){
for(var j=0,k=list.length;j<k;j++){
if(sortedList[i] == list[j])
target.push(j+1);
}
}
var cells = [];
//根据坐标获取该列所有td
for(var i=0,l=target.length;i<l;i++){
cells.push(document.getElementById('sortTable').rows[target[i]].cells[obj.cellIndex]);
}
//移动行
for(var i=0,l=list.length;i<l;i++){
//因为表头不能移动所以i+1
document.getElementById('sortTable').moveRow(cells[i].parentNode.rowIndex,i+1);
}
}
//增加鼠标行高亮效果
//增加列头点击效果
</script>1.if(direct == undefined)direct = 1;if(!direct)this.reverse(); if(obj.direct == undefined) obj.direct = 1;
if(obj.direct) obj.direct = 0;
else obj.direct = 1;
这两个地方的direct的值是肯定有联系的,我不大理解的就是,dierct的值他是如何传递的,在TH标签上面引用sort函数的时候并没有dierct这个参数啊,这两段代码的关系到底是怎么样的呢?
2.moveRow 方法,这个方法在IE下面是可以的,但是,FIREFOX OPERA CHOME下面都没有作用,moveRow方法是一个不符合WEB标准的方法吗?是不是要尽量少的去使用者个方法呢?
解决方案 »
- 节点搜索
- js中的地址转换问题。。。。。。求高手
- js放在body和head有什么区别?
- 帮我看看这段代码有什么问题?为什么提示An error occurred at line: 11 in the jsp file: /zixue-2.jsp
- 这里这个0什么意思
- 一个关于用JAVASCRIPT动态的生成一个新表格在IE中看不见的问题~~我是新手
- 怎么我写的JS在IE下正常,而在FireFox下经常不起作用啊!
- 用javascript如何实现复选框对列表内部值的变化
- jsp运行servlet发现调用的一个类找不到,但是本地运行又是对的
- 为什么我现在打开每个文件夹都会自动生成两个文件,好像是一段vbsctict程序。我用文本打,内容如下:开
- 请高手添加JS的注释
- windows mobile 6.1 里的 ie6 支持javascript里的那些事件?
dierct的值是在这里传递的
if(obj.direct == undefined) obj.direct = 1;
这句话意思就是说当dierct这个属性未定义时,就给obj对象添加一个direct属性并赋值为1;2、moveRow不是W3C标准函数,你可以通过其他方法来实现移行操作,如insertBefore,但注意改函数的第二个参数一定要写,如果没有的话你可以用null表示
那么if(direct == undefined)direct = 1;if(!direct)this.reverse();这两句代码里后面半句是不是说!direct和direct==0是一样的呢?因为要反序排列的话必须!direct,根据程序运行的结果来判断,好像的direct==0的时候才会反序排列...可是根据我的理解!direct和direct==0是不一样的额