下面介绍一下关于表格隔行换色的方法，我们先来介绍一下关于jquery的方法，然后 简单的介绍一下js的实现方法。
下面介绍一下关于表格隔行换色的方法，我们先来介绍一下关于jquery的方法，然后 简单的介绍一下js的实现方法。
| 代码如下 |
|
|
<script type="text/javascript">
$(document).ready(function(){
$(".table tr").mouseover(function(){ //如果鼠标移到class为table的表格的tr上时，执行函数
$(this).addClass("hover");}).mouseout(function(){ //给这行添加class值为hover，并且当鼠标一出该行时执行函数
$(this).removeClass("hover");}) //移除该行的class
$(".table tr:even").addClass("even"); //给class为table的表格的偶数行添加class值为alt
});
</script>
html代码
HTML代码
<table class="table" border="0" cellpadding="0" cellspacing="0" width="50%">
<!--用class="table"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>MSN</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href="/css/">css</a></td>
</tr>
</table>
|
js方法，利用用class查找元素
| 代码如下 |
|
|
/**
*根据标签名和类名获取元素
*@param tagName 标签名
*@param elementClassName 元素类名
*@return 标签名和类名为给定参数的元素数组
*/
function getElementsByTagNameAndClassName(tagName,elementClassName){
var array=new Array();
var elements=document.getElementsByTagName(tagName);
for(var i=0;i<elements.length;i++){
if(elements[i].className==elementClassName){
array.push(elements[i]);
}
}
return array;
}
/**
*表格隔行换色，指定鼠标移到当前行的背景颜色，移出当前行的背景颜色
*@param className 表格的class属性名
*@param oddBackgroundColor 表格奇数行背景颜色
*@param evenBackgroundColor 表格偶数行背景颜色
*@param mouseoverBackgroundColor 鼠标移到当前行的背景颜色
*/
function tableRowBackgroundColor(className,oddBackgroundColor,evenBackgroundColor,mouseoverBackgroundColor){
var tables=getElementsByTagNameAndClassName("table",className);
for(var i=0;i<tables.length;i++){
var rows=tables[i].rows;
var rowOriginalColor="";
for(var j=1;j<rows.length;j++){
rows[j].style.backgroundColor = j%2==0 ? oddBackgroundColor : evenBackgroundColor;
//鼠标移到当前行，指定当前行的背景颜色。
rows[j].onmouseover=function(){
rowOriginalColor=this.style.backgroundColor;
this.style.backgroundColor=mouseoverBackgroundColor
}
//鼠标移出当前行，指定当前行的背景颜色为行的原始颜色。
rows[j].onmouseout=function(){
this.style.backgroundColor=rowOriginalColor;
}
}
}
}
|
