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轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue项目中使用多选框的实例代码
Jul 22 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 中include()与require()的对比
2006/10/09 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
详解Python中with语句的用法
2015/04/15 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python程序变成软件的实操方法
2019/06/24 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python梯度下降算法的实现
2020/02/24 Python
python程序文件扩展名知识点详解
2020/02/27 Python
python实现人机五子棋
2020/03/25 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
SQL Server面试题
2013/04/04 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
感恩节活动方案
2014/01/27 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
中秋晚会策划方案
2014/06/12 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书