隐藏动态第n个表行数Jquery
隐藏动态第n个表行数Jquery
提问于 2016-07-28 23:25:17
我试图隐藏表中的行，但它不起作用。它是一个接一个地隐藏行，就像我首先单击tr类“plevel1”，它的关闭tr类“plevel2”。但是当我点击这个例子中的顶级父级(tr类plevel)时，它只关闭了第一个tr类plevel1。
我需要当我点击顶层类时，它将关闭所有tr类plevel1和他们的孩子。我正在从数据库中获取所有级别和类名。我已经在网上查看了tr:nth-child，但不确定如何在我的场景中实现它。另外，我是JQuery的新手。我更喜欢使用JQuery，但如果有人有更好的想法，那么我可以使用任何语言。
请参考下面的示例：
<table id = “tbl1”>
<tr class=”plevel”>
<td>
<a class=”plevel1” onclick=”showhide(‘plevel1’)>Parent 1</a>
</td>
</tr>
<tr class=”plevel1”>
<td>
<a class=”plevel2” onclick=”showhide(‘plevel2’)>Sub Parent 1</a>
</td>
</tr>
<tr class=”plevel2” >
<td>
Sub Parent 1 child
</td>
</tr>
<tr class=”plevel1”>
<td>
<a class=”plevel3” onclick=”showhide(‘plevel3’)>Sub Parent 1</a>
</td>
</tr>
</table
function showhide(hid) {
var login = hid;
if ($("tr[class=" + hid + "]").is(":hidden")) {
$("tr[class=" + hid + "]").show();
} else if ($("tr[class=" + hid + "]").is(":visible")) {
$("tr[class=" + hid + "]").hide();
}
}谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-29 08:15:06
您的数据不是表格数据，因此不适合使用<table>元素。它是分层数据，所以使用<ul>或<ol>元素(或者您也可以使用嵌套的<div>元素
<ul>
<li>
<a href="#">Level 1</a>
<ul>
<li>
<a href="#">Level 1.1</a>
<ul>
<li>
<span>Level 1.1.1</span>
</li>
<li>
<span>Level 1.1.2</span>
</li>
</ul>
</li>
<li>
<a href="#">Level 1.2</a>
<ul>
<li>
<span>Level 1.2.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>然后，要切换每个items子元素的可见性，请使用.next()选择器
$('a').click(function() {
$(this).next('ul').toggle();
})有关工作示例，请参阅fiddle。
Stack Overflow用户
发布于 2016-07-28 23:49:04
在jquery中尝试此not函数
function showhide(hid) {
$('table tr').not ("."+hid).hide();
$("tr[class=" + hid + "]").show();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ="tbl1" border="1">
<tr class="plevel">
<td>
<a class="plevel1" onclick="showhide('plevel1')">Parent 1</a>
</td>
</tr>
<tr class="plevel1">
<td>
<a class="plevel2" onclick="showhide('plevel2')">Parent 2</a>
</td>
</tr>
<tr class="plevel2">
<td>
Parent2 child
</td>
</tr>
<tr class="plevel1">
<td>
<a class="plevel3" onclick="showhide('plevel3')">Parent 3</a>
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38640637
复制相关文章
相似问题
腾讯云开发者
