jQuery が TR 表示と Hide_jquery を制御するための 3 つの一般的なメソッド

オンラインには多数ありますが、ここでは 3 つのタイプを紹介します:

最初の方法は 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(); 
}

2 番目の方法は、$.each() を使用することです。このメソッドでは、次のようにテーブルの 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'; 
} 
});

3 番目の方法は、属性フィルターを使用する方法です。この方法では、次のように、クラスなどの特定の属性を tr に追加する必要があります。

これにより、可視性の制御を直接使用できるようになります

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

とても簡単です。表示したい場合は、対応するメソッドを show() に変更するか、表示属性を ""

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

に変更してください

実際の応用:

注: デフォルトでは、「対応するページ名」を含む行のみが表示されます。ラジオ ボタンをクリックすると、別の行が表示されます。

次のように ID によって非表示と表示を制御します:

<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>