jquery 制作的表格效果

简介:                     $(function () {             //表头             $("#salary tr:eq(0)").
<!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>


相关文章
|
10月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
35 0
|
7月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
37 0
|
8月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
39 0
|
8月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
105 0
|
10月前
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
33 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
295 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
527 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
254 0
jQuery实现表格行的删除和增加
|
JavaScript Java
动态添加表格并增加Jquery校验
动态添加表格并增加Jquery校验
81 0
|
JavaScript
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
291 0
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作