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>

jquery 制作的表格效果





















本文转自蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366607,如需转载请自行联系原作者


上一篇:GitTortoise + Git Source Control Provider使用笔记


下一篇:Java类加载器学习2——自定义类加载器和父类委托机制带来的问题