<!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>

jquery 制作的表格效果_javascript