现在的位置: 首页 > 综合 > 正文

使用DOM方法实现表格的隔行变色效果

2012年02月04日 ⁄ 综合 ⁄ 共 1011字 ⁄ 字号 评论关闭

<!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>


<!--

-->

 


</head>

<body>
<div></div>
<table width="300" border="0">
  <tr>
    <td>111111111111</td>
 <td>111111111111</td>
  </tr>
  <tr>
    <td>222222222222</td>
 <td>222222222222</td>
  </tr>
  <tr>
    <td>333333333333</td>
 <td>333333333333</td>
  </tr>
  <tr>
    <td>444444444444</td><td>444444444444</td>
  </tr>
  <tr>
    <td>555555555555</td> <td>555555555555</td>
  </tr>
  <tr>
    <td>666666666666</td> <td>666666666666</td>
  </tr>
  <tr>
    <td>777777777777</td>  <td>777777777777</td>
  </tr>
  <tr>
    <td>888888888888</td> <td>888888888888</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var str=document.getElementsByTagName("tr");
 for(var i=0;i<=str.length;i++){
  if((i%2)==0){
   str[i].style.background="red";
   }else{
   str[i].style.background="green";
    }
  }
  
</script>

</body>
</html>

抱歉!评论已关闭.