网上有很多,这里介绍三种:
第一种方法,就是使用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控制隐藏和显示如下: