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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 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多层数组与对象的转换实例代码
2013/08/05 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python实例一个类背后发生了什么
2016/02/09 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
护理专业毕业生自荐书
2014/05/24 职场文书
商务英语求职信范文
2015/03/19 职场文书
学校通报表扬范文
2015/05/04 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL