<!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=gb2312" />
<title>实现表格隔行变色</title>
</head>
<style type="text/css" media="all">
.datalist{
border:1px #000000 solid;
font-family:"宋体";
border-collapse:collapse;
background-color:#999999;
font-size:14px;
}
.datalist tr.altrow{
background-color:#003399;
}
</style>
<script language="javascript">
window.οnlοad=function(){
var oTable = document.getElementById("oTable");
for(var i=0;i< oTable.rows.length;i++){
if(i%2==0){
oTable.rows[i].className="altrow";
}
}
}
</script>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th>传说中的文字111 </th>
<th>传说中的文字222 </th>
<th>传说中的文字333 </th>
</tr>
<tr><!--奇数行-->
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
</table>
</body>
</html>
使用 jquery后 把原来的javascript代码替换为下面的：、
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script> 
1405
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
