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

表格操作

　　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>

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

　　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>

网页显示效果：

　　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>

网页显示效果：

　其他应用

　　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>

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

　　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>

网页显示效果：

时间： 2024-09-30 15:37:41

jQuery对表格的操作及其他应用的相关文章

《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）

表格隔行变色以及单选/复选 表格展开关闭 表格筛选 字体变大/缩小 选项卡 网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从0开始的,因此第1行是偶数 1.表格隔行变色以及单选/复选 .even{background-color: #fff38f;} /*偶数行样式*/ .odd{ background-color: #dcdcdc;} /*奇数行样式*/ .selected{ background-color:#ff4136;

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

JQuery 对表格的详细操作

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><ht

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

jQuery实现表格隔行换色且感应鼠标高亮行变色

jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51.net/article/30047.htm jQuery技术之事件处理 http://blog.csdn.net/woshisap/article/details/7434010 jQuery实现表格隔行换色且感应鼠标高亮行变色,布布扣,bubuko.com

JQuery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8

漂亮的表格样式；jQuery清楚表格所有行；js解析后台传过来的JSON数据；动态生成表格数据

一 : 先看看漂亮的表格 css代码: .mylist { width: auto; height:auto; border:1px solid #accdf4; margin-top:10px; font-family:"宋体"; font-size:12px; color:#155c9f; text-align:center; border-collapse: collapse; } .mylist th { background-color:#d0e4ff; text-align

JQuery DOM 的常用操作

一.JQuery对象的基本方法: (1) get(); 取得所有匹配的元素(2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0](3) Number index(jqueryObj); 搜索子对象(4) each(callback); 类似foreach,不过遍历的是元素数组    如: $("img".each(function(index){ this.src = "test" + index + &q

jquery更改表格行顺序实例

使用jquery写的更改表格行顺序的小功能表格部分: 复制代码代码如下: <table class="table" id="test_table">  < thead> < tr>  < th>时间</th> < th>详情</th>  < th>操作</th> < /tr>  < /thead> < tbody> <