jQuery控制TR显示隐藏的三种常用方法


Posted in Javascript onAugust 21, 2014

网上有很多,这里介绍三种:

第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下:

<table> 
<tr><td>这行不隐藏</td></tr> 
<tr id="tr_1"><td>这行要隐藏</td></tr> 
<tr id="tr_2"><td>这行要隐藏</td></tr> 
... 
</table>

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

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

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

<table id="Tbl"> 
<tr><td>这行不隐藏</td></tr> 
<tr><td>这行要隐藏</td></tr> 
<tr><td>这行要隐藏</td></tr> 
... 
</table>

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

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

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

<table id="Tbl"> 
<tr><td>这行不隐藏</td></tr> 
<tr><td class="hid">这行要隐藏</td></tr> 
<tr><td class="hid">这行要隐藏</td></tr> 
... 
</table>

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

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

就这么简单。如果是要显示的话,把相应的方法改成show()或者display属性改为”"即可

实际应用:

说明:默认情况下,只显示“对应页面名称”所在行,当点击单选按钮时,显示不同的行。

<tr> 
<td class="tr_title_edit"><label for="f_navname">对应页面链接<font color="red">*</font></label></td> 
<td class="tr_content_edit"> 
<input type="radio" id="f_inner" name="f_navState" value="1" checked="checked" /><label for="f_inner">内部链接</label> 
<input type="radio" id="f_outer" name="f_navState" value="2" /><label for="f_outer">外部链接</label></td> 
</tr> 

<tr id="il" style="display:block"> 
<td class="tr_title_edit"><label for="f_pagename">对应页面名称</label></td> 
<td class="tr_content_edit"><select name='f_pageid' id="f_pageid"> 
<option value=""></option> 
<option value="">新闻</option> 
<option value="">通知</option> 
</select></td> 
</tr> 
<tr id="ol" style="display:none"> 
<td class="tr_title_edit"><label for="f_navname">外部链接</label></td> 
<td class="tr_content_edit"><input type="text" class="inputLine" size="40" id="f_outsidelink" name="f_outsidelink" /></td> 
</tr>

通过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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
jQuery截取指定长度字符串代码
Aug 21 #Javascript
jquery实现的下拉和收缩效果示例
Aug 21 #Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 #Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python的else子句使用指南
2016/02/27 Python
神经网络python源码分享
2017/12/15 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
使用python3构建文件传输的方法
2019/02/13 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python和c语言的主要区别总结
2019/07/07 Python
python实现大文本文件分割
2019/07/22 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
个人自我鉴定
2013/11/07 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
前台接待员岗位职责
2014/01/02 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
公司回复函格式
2015/07/14 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python中threading库实现线程锁与释放锁
2021/05/17 Python
详解Redis集群搭建的三种方式
2021/05/31 Redis