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>
