table-样式1
博客专区 > 0000001 的博客 > 博客详情
table-样式1
0000001 发表于3年前
table-样式1
  • 发表于 3年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: for(i = 0; i < rows.length; i++){ if(i % 2 == 0){ rows[i].className = "evenrowcolor"; }else{ rows[i].className = "oddrowcolor"; }

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>table-</title>
</head>
<body>
 <!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
 if(document.getElementsByTagName){ 
  
  var table = document.getElementById(id); 
  var rows = table.getElementsByTagName("tr");
  
  for(i = 0; i < rows.length; i++){         
   if(i % 2 == 0){
    rows[i].className = "evenrowcolor";
   }else{
    rows[i].className = "oddrowcolor";
   }     
  }
 }
}

window.onload=function(){
 altRows('alternatecolor');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
 font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:#333333;
 border-width: 1px;
 border-color: #a9c6c9;
 border-collapse: collapse;
}
table.altrowstable th {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
}
table.altrowstable td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
}
.oddrowcolor{
 background-color:#d4e3e5;
}
.evenrowcolor{
 background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table id="alternatecolor">
<tr>
 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
 <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
 <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
 <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

 

</body>
</html>

标签: table tr td
共有 人打赏支持
粉丝 36
博文 140
码字总数 46256
×
0000001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: