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


Posted in Javascript onJune 18, 2014

网上有很多,这里介绍三种: 第一种方法,就是使用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(); 
           } 
             
        } 
        }); 
       //} 
    
   });
Javascript 相关文章推荐
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
Javascript writable特性介绍
Feb 27 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 #Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 #Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 #Javascript
js调试系列 控制台命令行API使用方法
Jun 18 #Javascript
js调试系列 初识控制台
Jun 18 #Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
php正则修正符用法实例详解
2016/12/29 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
序列化Python对象的方法
2020/08/01 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
商业企业管理专业求职信
2014/07/10 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
防暑降温通知书
2015/04/27 职场文书
班主任开场白
2015/06/01 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python