隐藏动态第n个表行数Jquery

Hide dynamic nth number of table rows Jquery

本文关键字：Jquery 动态 隐藏      更新时间：2023-09-26

我试图隐藏表行，但它不起作用。它一个接一个地隐藏行，就像我点击第一个tr类"plevel1"，它的关闭tr类"plevel2"一样。但是，当我像本例中的顶级父级（tr类plevel）一样单击时，它只是关闭第一个tr类plevel1。

我需要当我点击顶部类时，它会关闭所有tr类plevel1和它们的Childs。我正在从数据库中获取所有级别和类名。我已经在网上查看了tr:nh子代，但不确定如何在我的场景中实现它。此外，我是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();                                      
   }
}

感谢

您的数据不是表格数据，因此使用<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>

然后，要切换每个项目子元素的可见性，请使用.next()选择器

$('a').click(function() {
    $(this).next('ul').toggle();
})

工作示例请参阅fiddle。

在jquery 中不尝试此功能

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>

相关文章：