综合jQuery在表格中的应用

 
 
     
         
         
         
         
            .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;} 
         
         
         
            $(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(); 
                }) 
            }) 
         
     
     
         
            jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，以及表格内容帅选等效果。 
           帅选：