首页 > Web开发 > 详细

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

时间：2016-10-12 11:31:01      阅读：256      评论：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年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！