发一个隔行换色的效果 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Sep 18

发一个隔行换色的效果 不指定


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行换色</title>
<style type="text/css" media="all">
body{
margin:16px;
padding:0px;
font-size:12px;
background-color:#633801;
}
table{
background-color:#FFDFB5;
width:560px;
margin:0px auto;
color:#FFF2BC;
text-align:center;
line-height:28px;
font-size:12px;
}
.table_label{
width:560px;
margin:0px auto;
}
.table_label div{
width:160px;
background-color:#BF6B00;
border-left:#FFDFB5 1px solid;
border-top:#FFDFB5 1px solid;
border-right:#FFDFB5 1px solid;
color:#FFEEC9;
line-height:28px;
text-align:center;
font-family:Arial, Helvetica, sans-serif,"宋体";
}
td{
width:180px;
font-family:Arial, Helvetica, sans-serif,"宋体";
}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
var tr=document.getElementsByTagName("tr"),c="#986A2E",c2;
for(var j=0;j<tr.length;j++){
if(j>0&&(j/2+"a").length>2){c="#885A1F"}
else if(j==0){c="#5B3300";tr[j].style.fontWeight="bold"}
else{c="#986A2E"}tr[j].style.backgroundColor=c;
if(j>0){
tr[j].onmouseover=function(){c2=this.style.backgroundColor;this.style.backgroundColor="#BF6B00";};  
tr[j].onmouseout=function(){this.style.backgroundColor=c2;};
}
}
}
</script>
</head>
<body>
<div class="table_label"><div>Recent Awards</div></div>
<table cellspacing="1" cellpadding="0">
  <tr>
    <td>Time</td>
    <td>Award</td>
    <td>Amount</td>
  </tr>
  <tr>
    <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
   <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
   <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
   <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
  <tr>
   <td>2008.11.16</td>
    <td>¥50</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>

▲返回顶部
Last modified by tommyhu on2009/09/18 22:29

互联网开发网友 Email Homepage
2010/02/05 22:39
<table>  
  
<%int c =0;%>  
  
//循环取列表  
  
<%  
       if (c % 2 == 0)    
       {  
        className = "一种颜色";  
       } else    
       {  
           className = "另外一种颜色";  
       }  
       c++;  
      %>  
      <tr lcass="className">  
       <td></td>  
  
     </tr>  
  
//循环结束  
  
</table>  

<table>

<%int c =0;%>

//循环取列表

<%
       if (c % 2 == 0)
       {
        className = "一种颜色";
       } else
       {
           className = "另外一种颜色";
       }
       c++;
      %>
      <tr lcass="className">
       <td></td>

     </tr>

//循环结束

</table>


某一天才发现有如下的方法,可以直接在css中写:

.Pop_TR{
background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色");
cursor:hand;
}
Pages: 1/1 First page 1 Final page
Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot