• 技术文章 >web前端 >js教程

    jQuery控制TR显示隐藏的几种方法_jquery

    2016-05-16 16:43:56原创670
    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下:

      
    这行不隐藏
    这行要隐藏
    这行要隐藏

    那么控制显隐可以直接使用

      for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数  
           $("#tr_"+i).hide();  
      } 
    

    第二种方法,是使用$.each(),这个方法需要设置table的id,如下:

      
    这行不隐藏
    这行要隐藏
    这行要隐藏

    那么控制显隐可以直接使用

      $.each($("#Tbl tr"), function(i){   
         if(i > 0){    
            this.style.display = 'none';  
         }  
      }); 
    

    第三种方法,是通过属性筛选器,这个方法需要给tr加上某个特定属性,比如class,如下:

      
    这行不隐藏
    这行要隐藏
    这行要隐藏

    那么控制显隐可以直接使用

      var trs = $("tr[class='hid']");  
      for(i = 0; i < trs.length; i++){   
          trs[i].style.display = "none"; //这里获取的trs[i]是DOM对象而不是jQuery对象,因此不能直接使用hide()方法  
      } 
    

    就这么简单。如果是要显示的话,把相应的方法改成show()或者display属性改为”"即可 实际应用: 说明:默认情况下,只显示“对应页面名称”所在行,当点击单选按钮时,显示不同的行。

       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
    

    通过id控制隐藏和显示如下:

      $("input[name='f_navState']").click(function(){ 
           //if($("input[name='f_navState']").attr("checked")==true){ 
            $("input[name='f_navState']").each(function(i){ 
             if(this.checked){ 
               var f_navState = $("input[name='f_navState']")[i].value;  //获得单选框的值 
               if(f_navState==1){ 
                //alert(123); 
                $("#il").show(); 
                $("#ol").hide(); 
               }else{ 
                //alert(456); 
                $("#ol").show(); 
                $("#il").hide(); 
               } 
                 
            } 
            }); 
           //} 
        
       }); 
    
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jQuery TR 显示隐藏
    上一篇:input标签内容改变的触发事件介绍_javascript技巧 下一篇:javascript setinterval 的正确语法如何书写_基础知识
    Web大前端开发直播班

    相关文章推荐

    • 深入浅析Node.js中常见的内置模块• JavaScript对象的构造函数和new操作符(实例详解)• Angular知识点分享:聊聊表单、管道、绑定、指令、通信和周期• 深入聊聊node.js中的EventEmitter• 一文掌握JavaScript对象
    1/1

    PHP中文网