制作双色Table,鼠标经过时颜色发生改变的jquery实现方法
...
<!--table样式-->
<style type="text/css">
th{
background:#e43d5f;
color:blue;
}
td{
font-size:13pt;
text-align:center;
}
tr.over td{
background:#8f432d; //鼠标经过时颜色发生变化
}
tr.alternate td{
background:#9f8858; //表格行间隔显示颜色
}
</style>
<!--引用jquery-->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".strip tr").mouseover(function()
{$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over"); //鼠标经过和鼠标移出时
}
);
$(".strip tr:even").addClass("alternate"); //偶数行颜色发生改变
});
</script>
...
<table class="strip">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
</tr>
<tr>
<td>余六</td>
<td>23</td>
</tr>
<tbody>
</tbody>
</table>