Linux中国 Linux中国门户站!
设为主页 设为主页
收藏本站 收藏本站
 
当前位置 :首页 ->网站设计 ->JavaScript ->正文

表格中两行的颜色交替显示

来源:Linuxdby.com 作者:Webmaster 时间:2007-04-13 点击: [收藏] [投稿]

<table id="main_table">
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
<tr>
 <td width="100">a</td>
 <td width="100">b</td>
</tr>
</table>
<script>
//
function setColor(curElement)
{
 curElement.style.backgroundColor="#DDEEFF";
 curElement.style.color="#000000";
}

function resetColor(curElement)
{
 if(curElement.rowIndex%2==0){
  curElement.style.backgroundColor="#E7E7E7";
 }else{
  curElement.style.backgroundColor="#FFFFFF";
 }
 curElement.style.color="black";
}

//动态产生一个层,用来控制每行颜色的变化
document.writeln('<div id="onmouse" style="display:none" onmouseover="setColor(this)" onmouseout="resetColor(this)"></div>');
var sTable = document.all.main_table;//得到指定表格id
if (sTable)
 for (var i=0; i<sTable.rows.length; i++)
 {
  if(i%2==0){
   sTable.rows[i].style.backgroundColor="#C2D8E0";
  }else{
   sTable.rows[i].style.backgroundColor="#ffffff";
  }
  //调用层中的方法,改变鼠标所在行的颜色
  sTable.rows[i].onmouseover=document.all.onmouse.onmouseover;
  sTable.rows[i].onmouseout=document.all.onmouse.onmouseout;
 }

</script>





 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<



上一篇: 去掉字符串前后的空格   下一篇: 网页中一些常见的问题与解决代码

文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论
更多相关文章
Power by linux-cn.com 粤ICP备05006655号