自动换整行颜色的CSS样式表格（需要用到JS）代码,Css代码库,德仔网

代码语言

代码分类

【Css】自动换整行颜色的CSS样式表格（需要用到JS）

作者:april / 发布于2015/11/17/ 907


	<!-- 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 class="altrowstable" 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 -->

试试其它关键字

同语言下

可能有用的

april贡献的其它代码(15)