table-样式1

最新推荐文章于 2024-07-19 12:58:53 发布

weixin_33736832

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量71

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/glelaine/blog/284947

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table-</title>
</head>
<body>

<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.οnlοad=function(){
altRows('alternatecolor');
}
</script>

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