Heim > Web-Frontend > js-Tutorial > Drei gängige Methoden für jQuery zur Steuerung der TR-Anzeige und hide_jquery

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

WBOY
Freigeben: 2016-05-16 16:38:59
Original
1815 Leute haben es durchsucht

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>
Nach dem Login kopieren

Dann kann die Steuerung der Sichtbarkeit direkt genutzt werden

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

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>
Nach dem Login kopieren

Dann kann die Steuerung der Sichtbarkeit direkt genutzt werden

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

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>
Nach dem Login kopieren

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()方法 
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

} 
}); 
//} 

});
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage