jquery 制作的表格效果
<!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>
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<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");
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");
//获取所有的工资
var $arr = $("#salary tr:not(:first):not(:last)"); //排除第一行和最后一行的所有行
var num = $arr.length; //排除第一行以及最后一行的行数
var sum = 0; //总工资
for (var i = 0; i < num; i++) {
//第一个是绝对定位，第二个是相对定位
var t = $("td", $($arr[i])).eq(2).text(); //循环每一行，取出工资的那个数据
sum += parseFloat(t);
}
//将总工资添加在最下面一行的td
$("#salary tr:last td:eq(1)").text(sum);
})
</script>
</head>
<body>
<table id="salary" border="1px" width="400px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td>马虎</td>
<td>50</td>
<td>3000</td>
</tr>
<tr>
<td>蒋卫生</td>
<td>40</td>
<td>2000</td>
</tr>
<tr>
<td>尤其键</td>
<td>30</td>
<td>5000</td>
</tr>
<tr>
<td>支付宝</td>
<td>20</td>
<td>5000</td>
</tr>
<tr>
<td>马化腾</td>
<td>20</td>
<td>5000</td>
</tr>
<tr>
<td>汇总</td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
