HTML、CSS和JavaScript学习五(案例分析三表格排序及颜色变换)

来源：互联网发布：轩辕剑光武进阶数据编辑：程序博客网时间：2024/06/05 15:41

三．对表格中的的每一行进行按某个条件进行排序，效果图，当点击年龄是就会触发事件源，按照年龄将每行进行排序，第一点击按照从小到大的顺序排序，第二次点击是按照从大到小的顺序进行排序；并且当鼠标方法间隔色的行时，颜色会改变，鼠标离开后又变回原来的颜色，看效果图。

<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].onmouseover=function(){colorName=this.className;this.className="light";};ross[i].onmouseout=function(){this.className=colorName;};}}//次html页面一在浏览器中初始化就利用window对象的onload事件加载改变颜色的方法。//注意是将changeColor赋给onload，不是将changeColor（）赋给onload，区别在前面的博客“HTML、CSS和javascript学习三”中提到了window.onload=changeColor;</script></head><body><table><tr><th>姓名</th><th><a href="javascript:void(0)" onclick="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>中的函数处理事件源；同时颜色会改变，具体看代码注释。