[英]Show/Hide all tr-s inside table
這是html結構
<table class="views-table cols-3">
<caption>
<h2>LINK(which will hide/show all trs in this table)</h2>
</caption>
<thead>
<tbody>
...
</tbody>
</table>
該表在同一類中重復n次。 請使用js或jquery腳本幫助您,該腳本可隱藏/顯示單擊鏈接的表中的所有tr -s或整個<tbody>
。
$('.views-table h2').click(function() {
$(this).closest('table').find('tbody').toggle();
});
$(".views-table h2").click(function(){
var table = $(this).parents("table");
var tbody = table.children("tbody");
if(tbody.is(':visible')){
tbody.hide();
}else{
tbody.show();
}
});
在jQuery中:
(jQuery.noConflict())(function($){
$('.views-table cols-3 h2').click(function(){
if($(this).parent('.views-table').find('TBODY > TR')[0].is(':visible')) {
$(this).parent('.views-table').find('TBODY > TR').hide();
} else {
$(this).parent('.views-table').find('TBODY > TR').show();
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.