温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery 制作的表格效果

发布时间:2020-06-03 06:01:47 来源:网络 阅读:276 作者:蓬莱仙羽 栏目:web开发
<!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 制作的表格效果

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI