<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<link rel="stylesheet" type="text/css" href="/go.html?url=table.css">
<title></title>
<script src="../jquery-1.8.2.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function()
{
//表头
$("#salary tr:eq(0)").css({"font-size":"30px","text-align":"center"});
//最后一行
$("#salary tr:last").css("color","red");
//排除表头的前三项
$("#salary tr:not(:first):lt(3)").css("font-size","22px").css("color","red");
//隔行变色,排除表头和表尾
var str = "#salary tr:not(:first):not(:last)"
$(str+":even").css("background-color","yellow");
//光棒效果
var bgcolor;
$(str).mouseover(function()
{
bgcolor = $(this).css("background-color");
$(this).css("background-color","blue");
}).mouseout(function()
{
$(this).css("background-color",bgcolor);
});
//数据行，鼠标变小手
$(str).css("cursor","pointer");
});
</script>
</head>
<body>
<table id="salary" width="400px" border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td>李四</td>
<td>12</td>
<td>1500</td>
</tr>
<tr>
<td>王五</td>
<td>19</td>
<td>1300</td>
</tr>
<tr>
<td>小六</td>
<td>16</td>
<td>1090</td>
</tr>
<tr>
<td>小七</td>
<td>18</td>
<td>1340</td>
</tr>
<tr>
<td>张三</td>
<td>10</td>
<td>1000</td>
</tr>
<tr>
<td>汇总</td>
<td colspan="2">6000</td>
</tr>
</table>
</body>
</html><html>
<head>
<meta http-equiv="Con
阅读背景：
jQuery学习07---隔行变色，光棒效果，鼠标变小手
来源：互联网
分享到：
