网上有很多,这里介绍三种:
第一种方法,就是使用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();
}
}
});
//}
});
分享到:
相关推荐
使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,其他方法祥看本
<tr id=tr_1>这行要隐藏</td></tr> <tr id=tr_2>这行要隐藏</td></tr> ... 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $(#tr_+i).hide(); } 第二种方法,是使用$....
下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码。注意:ready方法必须要引用jquery的库。 1.html Code <html> <head> <meta http-equiv=Content-Type content=text/html; ...
分享下jQuery如何隐藏和显示 input 默认值的例子。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <... <...
设置attr的disabled属性可以控制某行显示或者隐藏 //加载费用项目下拉框 function loadChargeItemsSelect(status){ $("#settlementDetailInfo").find("tr[trflag=trflag]").each( function(){ $(this).children()....
1.关于指定表格指定列隐藏显示 代码如下: $(“:checkbox[name*=month]”).each(function(){ if(!$(this).attr(“checked”)){ var colnum = $(this).val(); $(“#listPage”).find(‘tr’).find(“td:eq(” + colnum...
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试 ...
碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。 第一步:使用DIV包裹需要隐藏显示的TR。代码如下: <div id=divName>