您的位置：首页 > Web前端 > JQuery

Jquery快速制作双色表格

2013-03-27 01:03 281 查看

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".strip tr").mousemove(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over")})
$(".strip tr:even").addClass("alt");
});

</script>
<style type="text/css">
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="strip" width="50%" border="0"  cellpadding="0"  cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr><tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr><tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
</tbody>

</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航