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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
ES6的新特性概览
Mar 10 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
jquery实现图片轮播器
May 23 jQuery
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
对 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP学习之正则表达式
2011/04/17 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python使用tkinter实现简单计算器
2018/01/30 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
数据库专业英语
2012/11/30 面试题
档案检查欢迎词
2014/01/13 职场文书
大学应届生的自我评价
2014/03/06 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL