HTML、CSS和JavaScript学习五(案例分析三表格排序及颜色变换)_html 针对表格排序后表格动态颜色不一样-CSDN博客

本文链接：https://blog.csdn.net/rainmeterlinux/article/details/8296488

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

<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>中的函数处理事件源；同时颜色会改变，具体看代码注释。