<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title>单双行显示不同的颜色</title>
<!--下面为javascript代码-->
<script type = "text/javascript">
window.onload = function color(){//窗口加载时调用
var table = document.getElementById("person");//根据table的 id 属性值获得对象
var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
for(var i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
}
else{
rows[i].style.backgroundColor = "White";//单数行时背景色为white
}
}
}
</script>
<!--下面为css代码-->
<style type = "text/css">
#person
{
border-style:1px solid;
border-color:blue;
font-weight:bold;
font-family:楷体,Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:auto;
}
#person th
{
border:1px solid;
padding:3px 7px 2px 7px;
background-color:#A7C942;
color:#ffffff;
text-align:center;
}
#person td
{
border-style:solid;
border-width:1px;
text-align:center;
}
</style>
</head>
<body>
<table id = "person" align = "center" width = "90%" height = "200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>33333333</td>
<td>睡觉</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>44444444</td>
<td>旅游</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>55555555</td>
<td>购物</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>66666666</td>
<td>看美女</td>
</tr>
</table>
</body>
</html>
1127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
