Drei gängige Methoden für jQuery zur Steuerung der TR-Anzeige und hide_jquery

Es gibt viele online, hier sind drei Arten:

Die erste Methode ist die Verwendung der ID. Diese Methode kann die ID von tr beim Generieren von HTML dynamisch festlegen. Dies ist auch die am häufigsten verwendete und einfachste Methode:

<table> 
<tr><td>这行不隐藏</td></tr> 
<tr id="tr_1"><td>这行要隐藏</td></tr> 
<tr id="tr_2"><td>这行要隐藏</td></tr> 
... 
</table>

Dann kann die Steuerung der Sichtbarkeit direkt genutzt werden

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

Die zweite Methode ist die Verwendung von $.each(). Diese Methode erfordert das Festlegen der ID der Tabelle wie folgt:

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

Dann kann die Steuerung der Sichtbarkeit direkt genutzt werden

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

Die dritte Methode ist der Attributfilter. Diese Methode erfordert das Hinzufügen eines bestimmten Attributs zu tr, z. B. einer Klasse, wie folgt:

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

Dann kann die Steuerung der Sichtbarkeit direkt genutzt werden

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

So einfach ist das. Wenn Sie es anzeigen möchten, ändern Sie die entsprechende Methode in show() oder ändern Sie das Anzeigeattribut in „“

Praktische Anwendung:

Hinweis: Standardmäßig wird nur die Zeile angezeigt, die den „entsprechenden Seitennamen“ enthält. Wenn Sie auf das Optionsfeld klicken, werden andere Zeilen angezeigt.

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

Steuern Sie das Ausblenden und Anzeigen nach ID wie folgt:

$("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(); 
} 

} 
}); 
//} 

});