综合jQuery在表格中的应用

发布时间：2020-06-04 06:40:03 来源：网络阅读：440 作者：lflianglan 栏目：web开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
        <meta name="keywords" content="关键词1，关键词2，关键词3等等"/> 
        <title>jQuery表格应用</title> 
        <style type="text/css"> 
            .tabWrap{width:400px; height:auto; border:1px solid #000; margin:10px auto;} 
            table{width:100%; height:auto;} 
            tr{width:100%; height:40px; line-height:40px; text-align:center;} 
            thead{background:#d8d8d8; border-bottom:1px solid #000;} 
            .even{background:#999;} 
            .odd{pink;} < /span>
            .selected{background:yellow;} 
        </style> 
        <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
        <script type="text/javascript"> 
            $(function(){ 
                //普通的隔行变色效果,且排除表头 
                $("tbody>tr:odd").addClass("odd"); 
                $("tbody>tr:even").addClass("even"); 
 
                //使用contains选择器将某一行变为高亮显示 
                $("tr:contains('王五')").addClass("selected"); 
 
                //单选框控制表格行高亮 
                $("#rad>tr").click(function(){ 
                    $(this).addClass("selected") 
                           .siblings().removeClass("selected") 
                           .end() //如果需要重新返回到$(this)对象就可以用end()方法 
                           .find(":radio").prop("checked",true); 
                }) 
                $("input:checked").parents("tr").addClass("selected");//默认选中行高亮 
 
                //复选框控制表格高亮 
                $("#che>tr").click(function(){ 
                    if($(this).hasClass("selected")){ 
                        $(this).removeClass("selected") 
                               .find(":checkbox").prop("checked",false); 
                    }else{ 
                        $(this).addClass("selected") 
                               .find(":checkbox").attr("checked",true); 
                    } 
                }) 
 
                //表格展开关闭 
                $("tr.parent").click(function(){//获取所谓的父行，并给点击事件 
                    $(this) 
                    .toggleClass("selected")   //添加或删除高亮 
                    .siblings(".child_"+this.id).toggle();  //隐藏或显示所谓的字行 
                    //".child_"+this.id这样写必须命名符合规则，child_后面的跟id一样 
                }) 
 
                //表格内容帅选  利用contains选择器和filter()方法 
                $("#filterName").keyup(function(){ 
                    $("tbody tr").hide() 
                                 .filter(":contains('"+($(this).val())+"')").show(); 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <div style="margin:0 auto; width:400px; height:auto;"> 
            jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，以及表格内容帅选等效果。<br /> 
           帅选： <input type="text" id="filterName" /> 
        </div> 
        <div class="tabWrap"> 
            <table style="border-collapse:collapse;"> 
                <thead> 
                    <tr><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></tr> 
                    <tr class="child_row_01"><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></tr> 
                    <tr class="child_row_02"><td>赵六</td><td>男</td><td>河南郑州</td></tr> 
                    <tr class="child_row_02"><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></tr> 
                    <tr class="child_row_03"><td>谢天</td><td>女</td><td>湖南郴州</td></tr> 
                    <tr class="child_row_03"><td>邓九</td><td>男</td><td>北京海淀</td></tr> 
                </tbody> 
            </table> 
        </div> 
        <div class="tabWrap"> 
            <table style="border-collapse:collapse;"> 
                <thead> 
                    <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
                </thead> 
                <tbody id="rad"> 
                    <tr><td><input type="radio" name="sel" checked="checked" /></td><td>张三</td><td>男</td><td>浙江宁波</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>李四</td><td>女</td><td>湖南长沙</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>王七</td><td>男</td><td>河北邢台</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>赵六</td><td>男</td><td>河南郑州</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>刘三</td><td>男</td><td>湖北武汉</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>陈十</td><td>女</td><td>海南三亚</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>谢天</td><td>女</td><td>湖南郴州</td></tr> 
                    <tr><td><input type="radio" name="sel" /><td>邓九</td><td>男</td><td>北京海淀</td></tr> 
                </tbody> 
            </table> 
        </div> 
        <div class="tabWrap"> 
            <table style="border-collapse:collapse;"> 
                <thead> 
                    <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
                </thead> 
                <tbody id="che"> 
                    <tr><td><input type="checkbox" checked="checked" /></td><td>张三</td><td>男</td><td>浙江宁波</td></tr> 
                    <tr><td><input type="checkbox" /><td>李四</td><td>女</td><td>湖南长沙</td></tr> 
                    <tr><td><input type="checkbox" /><td>王七</td><td>男</td><td>河北邢台</td></tr> 
                    <tr><td><input type="checkbox" /><td>赵六</td><td>男</td><td>河南郑州</td></tr> 
                    <tr><td><input type="checkbox" /><td>刘三</td><td>男</td><td>湖北武汉</td></tr> 
                    <tr><td><input type="checkbox" /><td>陈十</td><td>女</td><td>海南三亚</td></tr> 
                    <tr><td><input type="checkbox" /><td>谢天</td><td>女</td><td>湖南郴州</td></tr> 
                    <tr><td><input type="checkbox" /><td>邓九</td><td>男</td><td>北京海淀</td></tr> 
                </tbody> 
            </table> 
        </div> 
    </body> 
</html>
jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，
以及表格内容帅选等效果。
向AI问一下细节
综合jQuery在表格中的应用

猜你喜欢

最新资讯

相关推荐

相关标签
