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 相关文章推荐
JS按字节截取字符长度实例
Nov 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
AngularJS Controller作用域
Jan 09 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 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
PHP编码规范-php coding standard
2007/03/16 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python两种注释用法的示例
2020/10/09 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年部门工作总结
2014/11/12 职场文书
大学生支教感言
2015/08/01 职场文书
初中团委工作总结
2015/08/13 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技