jQuery制作双色表格

来源：互联网发布：斗鱼软件编辑：程序博客网时间：2024/04/30 22:42
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".stripe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");})$(".stripe tr:even").addClass("alt");})</script><style>th{background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}td {padding:6px 11px;border-bottom:1px solid #95bce2;vertical-align:top;text-align:center;}td*{padding:6px 11px;}tr.alt td{background:#ecf6fc;}tr.over td{background:#bcd4ec;}</style></head><body><table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"><thead><tr><th>姓名</th><th>年龄</th><th>QQ</th><th>Email</th></tr></thead><tbody><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr><tr><td>zhangming</td><td>11</td><td>1234</td><td>qwer</td></tr></tbody></table><p>哈哈</p></body></html>
0 0