三.对表格中的的每一行进行按某个条件进行排序,效果图,当点击年龄是就会触发事件源,按照年龄将每行进行排序,第一点击按照从小到大的顺序排序,第二次点击是按照从大到小的顺序进行排序;并且当鼠标方法间隔色的行时,颜色会改变,鼠标离开后又变回原来的颜色,看效果图。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.one{
background-color:#FFFF00;
}
.two{
background-color:#FFCCFF;
}
.light{
background-color:#00FF00;
}
</style>
<link rel="stylesheet" href="sortTablianxitool.css" />
<script type="text/javascript" src="sortTablianxitools.js"></script>
<script type="text/javascript">
var b=true;//定义一个标志
function sortTab()
{
var tabNode=getByTag("table")[0];//获取整个html中的table节点(实际上只有一个)
var rowss=tabNode.rows;//获取表格中所有的行对象,一行是一个对象
//定义一个临时容器(利用Array对象创建一个数组),将表格中需要参与排序的对象临时存储
var arrs=new Array();
for(var i=1;i<rowss.length;i++)
{
arrs[i-1]=rowss[i];
}
//将临时容器中的数据按照年龄进行排序
sortt(arrs);
//获取tabNode的第一个子节点(其实每个table标签中都有一个tbody标签),在ie4上是tabNode.childNodes[0],如果这里也写0的话,
//获取的是text文本类型的节点,所以应该是1,这可能好似浏览器的版本的原因,我用的是chrome最新版本
var tbdNode=tabNode.childNodes[1];
//alert(tbdNode.nodeName);
if(b)
{
//升序
for(var i=0;i<arrs.length;i++)
{
//将排好序的数组中的元素一个一个的取出再添加的table中的tbody中去
tbdNode.appendChild(arrs[i]);
}
b=false;
}else{
//降序
for(var i=arrs.length-1;i>=0;i--)
{
tbdNode.appendChild(arrs[i]);
}
b=true;
}
}
//对数组进行排序,升序
function sortt(arrs)
{
for(var x=0;x<arrs.length;x++)
{
for(var y=x+1;y<arrs.length;y++)
{
if(parseInt(arrs[x].cells[1].innerText)>parseInt(arrs[y].cells[1].innerText))
{
var temp=arrs[x];
arrs[x]=arrs[y];
arrs[y]=temp;
}
}
}
}
var colorName;//定义一个变量,用于临时存放当鼠标放在每行上变色前的颜色
function changeColor()
{
var tbNode=getByTag("table")[0];//获取整个html中的table节点(实际上只有一个)
var ross=tbNode.rows;//获取<table>标签中所有的行集合
//以表格中行的个数作为for循环的次数条件,i是从第二行开始的,所以i=1;
for(var i=1;i<ross.length;i++)
{
if(i%2==1)//如果是奇数
ross[i].className="one";
else//否则是偶数行
ross[i].className="two";
//更据每行的鼠标覆盖事件和鼠标离开事件分别定义匿名函数
ross[i].οnmοuseοver=function()
{
colorName=this.className;
this.className="light";
};
ross[i].οnmοuseοut=function()
{
this.className=colorName;
};
}
}
//次html页面一在浏览器中初始化就利用window对象的onload事件加载改变颜色的方法。
//注意是将changeColor赋给onload,不是将changeColor()赋给onload,区别在前面的博客“HTML、CSS和javascript学习三”中提到了
window.οnlοad=changeColor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortTab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>发的</td>
<td>34</td>
<td>附近</td>
</tr>
<tr>
<td>反对</td>
<td>23</td>
<td>鸡皮</td>
</tr>
<tr>
<td>即可</td>
<td>98</td>
<td>尽快</td>
</tr>
<tr>
<td>不能</td>
<td>3</td>
<td>离开了</td>
</tr>
<tr>
<td>就看</td>
<td>12</td>
<td>看来</td>
</tr>
<tr>
<td>二位</td>
<td>65</td>
<td>空格</td>
</tr>
</table>
</body>
分析:
html代码(定义界面):主要是在<body>中定义一个<table>,共有7个<tr>,也就是有7行,每行有三个单元格,即三列。可以看到第一行是<th>标签,不是<td>标签,<th>标签定义的单元格其内容以粗体显示。
css代码(定义样式):样式是以<link>的方式将tabtool.css文件链接到html代码中的。分别是标签选择器(table)、和两个多重选择器(table th和table td)。代码如下(演示会发现,下面定义的table td和table th并没有在效果图中显示,因为在html代码中有了一个<style>标签,这就考虑到优先级的问题了)。
table{
border:#003399 1px solid;
width:700px;
}
table td{
border:#FF0000 1px solid;
background-color:#CCFFFF;
width:10px;
}
table th{
border:#FF0000 1px solid;
background-color:#CCFFFF;
width:10px;
}
javascript代码(动态交互):当点击<a>标签中的“年龄”链接是,会触发事件,通过定义在<stcipt>中的函数处理事件源;同时颜色会改变,具体看代码注释。