`
zjx2388
  • 浏览: 1306343 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

table 隔行换色

    博客分类：
  • Page
 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table隔行换色</title>
</head>
<style type="text/css">
.a1{ background-color:#F8F8F8; color:#0E30AE}
.a2{ background-color:#FFFFFF; color:#0E30AE}
.a11{ background-color:#B3C1F4; color:#0E30AE}
.a22{ background-color:#EDF1FF; color:#0E30AE}

</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tablename=document.getElementById("table1")
var tr1=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr1.length;i++){
tr1[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.backgroundColor="#fffed5";
}
tr1[i].onmouseout=function(){
this.style.fontWeight=""
this.style.backgroundColor=""
}
if(i%2==0){
tr1[i].className="a1";
}else{
tr1[i].className="a2";
}
}
}
onloadEvent(showtable);
-->
</script>
<body>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
 <tr>
  <td width="100%">
  
  <table border="0" cellpadding="3" cellspacing="1" width="100%" align="center" style="background-color: #b9d8f3;" id="table1">
   <tr style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
    <td><font size="2">列1</font></td>
    <td><font size="2">列2</font></td>
    <td><font size="2">列3</font></td>
   </tr>
        
   <tr>
    <td nowrap="nowrap" align="left">11<font size="2"></td>
    <td align="right"><font size="2">22</font></td>
    <td align="right"><font size="2">33</font></td>
   </tr>
    <tr>
    <td nowrap="nowrap" align="left">11<font size="2"></td>
    <td align="right"><font size="2">22</font></td>
    <td align="right"><font size="2">33</font></td>
   </tr>
   <tr>
    <td nowrap="nowrap" align="left">11<font size="2"></td>
    <td align="right"><font size="2">22</font></td>
    <td align="right"><font size="2">33</font></td>
   </tr>
   <tr>
    <td nowrap="nowrap" align="left">11<font size="2"></td>
    <td align="right"><font size="2">22</font></td>
    <td align="right"><font size="2">33</font></td>
   </tr>
  </table>

  </td>
 </tr>
</table>

</body>
</html>

 

效果图：



 

  • 大小: 27.2 KB
分享到：
| StringBuffer清空方法，效率最高
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics