gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery控制TR显示隐藏的三种常用方法由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

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

?
1
2
3
4
5
6
< table >
< tr >< td >这行不隐藏</ td ></ tr >
< tr id = "tr_1" >< td >这行要隐藏</ td ></ tr >
< tr id = "tr_2" >< td >这行要隐藏</ td ></ tr >
...
</ table >

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

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

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

?
1
2
3
4
5
6
<table id= "Tbl" >
<tr><td>这行不隐藏</td></tr>
<tr><td>这行要隐藏</td></tr>
<tr><td>这行要隐藏</td></tr>
...
</table>

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

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

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

?
1
2
3
4
5
6
<table id= "Tbl" >
<tr><td>这行不隐藏</td></tr>
<tr><td class= "hid" >这行要隐藏</td></tr>
<tr><td class= "hid" >这行要隐藏</td></tr>
...
</table>

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

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

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

实际应用:

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< 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控制隐藏和显示如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$( "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();
}
 
}
});
//}
 
});

最后此篇关于jQuery控制TR显示隐藏的三种常用方法的文章就讲到这里了,如果你想了解更多关于jQuery控制TR显示隐藏的三种常用方法的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com