隔行变色表格
<!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.onload=function(){var oTable = document.getElementById("oTable");for(var i=0;i< oTable.rows.length;i++){if(i%2==0){oTable.rows.className="altrow";}}}</script><body><table class="datalist" summary="list of members in EE Studay" id="oTable"><tr> <th>传说中的文字111&nbsp;</th> <th>传说中的文字222&nbsp;</th> <th>传说中的文字333&nbsp;</th></tr><tr><!--奇数行--> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td></tr><tr> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td></tr><tr> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td></tr><tr> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td></tr><tr> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td></tr><tr> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</td> <td>传说中的文字&nbsp;</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>
页:
[1]