码迷，mamicode.com
首页 > Web开发 > 详细

jQuery对表格的操作及其他应用

时间：2016-10-12 11:31:31      阅读：290      评论：0      收藏：0      [点我收藏+]

标签：

表格操作

　　1.隔行变色：对普通表格进行隔行换色；单击显示高亮样式；复选框选中高亮

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <title>表格应用--隔行/选中变色</title>
    <style type="text/css">
        .tble{
            border: 1px solid red;
        }
        /*偶数行样式*/
        .even{ 
            background: red;
        }
        /*奇数行样式*/
        .odd{
            background: yellow;
        }
        .selected{
            background: red;
        }
    </style>
    </head>
    <body>
        <table class="tble">
            <thead>
                <tr><th><input type="checkbox" id="CheckedAll"/></th><th>姓名</th><th>姓别</th><th>暂住地</th></tr>
            </thead>
            <tbody>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
            $(function(){
                //1.普通隔行换色，从表头开始算起
                $("tr:odd").addClass("odd"); //给奇数行添加样式
                $("tr:even").addClass("even"); //给偶数行添加样式

                //2.给tbody中添加隔行换色
                $("tbody>tr:odd").addClass("odd"); //给tbody中奇数行添加样式
                $("tbody>tr:even").addClass("even"); //给tbody中偶数行添加样式
                
                //3.单选控制表格行高亮
                $("tbody>tr").click(function(){
                    $(this).addClass(‘selected‘).siblings().removeClass(‘selected‘).end().find(‘:radio‘).attr(‘checked‘,true);
                })
                
                //4.复选框高亮样式
                $(‘tbody>tr‘).click(function(){
                    if($(this).hasClass(‘selected‘)){
                        $(this).removeClass(‘selected‘).find(‘:checkbox‘).attr(‘checked‘,false);
                    }else{
                        $(this).addClass(‘selected‘).find(‘:checkbox‘).attr(‘checked‘,true);
                    }
                })
            })
        </script>
    </body>
</html>
View Code

如果需要查看网页显示效果，复制粘贴代码运行就可以

　　2.表格展开关闭

技术分享 
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <title>表格应用--表格展开关闭</title>
    <style type="text/css">
        .tble{
            border: 1px solid red;
        }
        /*偶数行样式*/
        .even{ 
            background: red;
        }
        /*奇数行样式*/
        .odd{
            background: yellow;
        }
        .selected{
            background: red;
        }
        .parent{
            background: #CCCCCC;
        }
    </style>
    </head>
    <body>
        <table class="tble">
            <thead>
                <tr><th></th><th>姓名</th><th>姓别</th><th>暂住地</th></tr>
            </thead>
            <tbody>
                <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
                <tr class="child_row_01"><td></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr class="child_row_01"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                
                <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
                <tr class="child_row_02"><td></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr class="child_row_02"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
                
                <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
                <tr class="child_row_03"><td></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
                <tr class="child_row_03"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
            </tbody>
        </table>
        
        <script type="text/javascript">
            $(function(){
                $(‘tr.parent‘).click(function(){   // 获取所谓的父行
                    $(this)
                        .toggleClass("selected")   // 添加/删除高亮
                     .siblings(‘.child_‘+this.id).toggle();  // 隐藏/显示所谓的子行
                    });
            })
        </script>
    </body>
</html>
View Code

 

网页显示效果：

技术分享

　　3.表格内容筛选：使用filter()筛选方法

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <title>表格应用--表格内容筛选</title>
</head>
<body>
    <div>
        <br/>
        筛选：<input id="filterName" /><br/>
    </div>
    <table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
            <tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
            <tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
            <tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
        </tbody>
        
        <script type="text/javascript">
              $(function(){
                  //使用filter()筛选方法
                   $("#filterName").keyup(function(){  //为文本框绑定keyup事件
                      $("table tbody tr").hide().filter(":contains(‘"+( $(this).val() )+"‘)").show();
                   }).keyup();  //DOM加载完成时，绑定事件完成后立即触发
              })
        </script>
    </table>
</body>
</html>
View Code

网页显示效果：

技术分享

　其他应用

　　1.网页字体大小：网站中经常有“放大”和“缩小”字号的控制，单击他们，控制字体呈现不同大小的效果

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <title>其他应用--字体放大缩小</title>
    </head>
    <body>
        <form>
            <div class="msg">
                <div class="msg_caption">
                    <span class="bigger">放大</span>
                    <span class="smaller">缩小</span>
                </div>
                <div>
                    <p id="para">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。</p>
                </div>
            </div>
        </form>
        
        <script type="text/javascript">
            $(function(){
                
                //无限放大 缩小字体
                $("span").click(function(){  //为span元素绑定单击事件
                    var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位
                    var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位
                    var unit = thisEle.slice(-2);  //获取单位，slice()返回字符串中从指定的字符开始的一个字符串
                    var cName = $(this).attr("class");
                    if(cName=="bigger"){
                        textFontSize += 2
                    }else{
                        textFontSize -= 2;
                    }
                    $("#para").css("font-size",textFontSize + unit); //再次获取“para”元素，并为他的font-size属性赋新值（textFontSize），并拼接上单位
                    
                    
                })
                
                
                //上面方法是无限放大，无限缩小，如果不合适，则设置最大字体和最小字体
                $("span").click(function(){  //为span元素绑定单击事件
                    var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位
                    var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位
                    var unit = thisEle.slice(-2);  //获取单位，slice()返回字符串中从指定的字符开始的一个字符串
                    var cName = $(this).attr("class");
                    if(cName == "bigger"){
                            if(textFontSize <= 22){
                                textFontSize += 2;
                            }
                        }else if(cName == "smaller"){
                            if(textFontSize >= 12){
                                textFontSize -= 2;
                            }
                        }
                        $("#para").css("font-size",textFontSize + unit); 
                })
                
            })
        </script>
    </body>
</html>
View Code

网页显示效果：两种不同的显示效果，第一种无限放大缩小；第二种控制最大最小字号进行显示

　　2.网页选项卡：通过隐藏和显示来切换不同内容

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <title>其他应用--网页选项卡</title>
    
    <style type="text/css">
        .selected{background: yellow;}
        .tab{width:400px; font-size:12px;}
        .tab_menu ul{padding:0px;margin:0px;}
        .tab_menu li{list-style:none;display:block; float:left;background:#C2CEFE; height:22px; line-height:22px;
                    padding: 0px 8px;  margin-right:6px; border:#86B4CA 1px solid;}
        .tab_box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
        .tab_menu ul li.selected{background:#dadada; cursor:pointer; }
        .hide{display:none;} 
        .hover{background: green;}
    </style>
    </head>
    <body>
        <div class="tab">
            <div class="tab_menu">
                <ul>
                    <li class="selected">实时</li>
                    <li>新闻</li>
                    <li>娱乐</li>
                </ul>
            </div>
            <div class="tab_box">
                <div>实时</div>
                <div class="hide">新闻</div>
                <div class="hide">娱乐</div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function(){
                var $div_li = $("div.tab_menu ul li");
                $div_li.click(function(){
                    $(this).addClass("selected")  //当前li元素高亮
                    .siblings().removeClass("selected"); //去掉其他同辈li元素的高亮
                    
                    var index = $div_li.index(this); //获取当前单击的li元素在全部li元素中的索引
                    
                    $("div.tab_box > div")  //选取子节点
                        .eq(index).show()   //显示li元素对应的div元素
                        .siblings().hide(); //隐藏其他几个同辈的div元素
                }).hover(function(){  //添加光标滑过效果
                    $(this).addClass("hover");
                },function(){
                    $(this).removeClass("hover");
                })
            })
        </script>
    </body>
</html>
View Code

网页显示效果：

技术分享

 

jQuery对表格的操作及其他应用

标签：

原文地址：http://www.cnblogs.com/parawork/p/5951800.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！