Question

我试图隐藏表格行，但它不起作用。它是一个接一个地隐藏行，就像我点击第一个tr的类'plevel1'，它的关闭tr类“plevel2”。但是当我在这个例子（tr class plevel）中点击像顶级父级别时，它只关闭第一个tr类plevel1。

当我点击顶级课程时，我需要关闭所有tr类plevel1和他们的Childs。我从数据库中获取所有级别和类名。我已经在线查看了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();                                      
   }
}

由于

Answer 1

尝试在jquery

中不起作用

＆＃13;

function showhide(hid) { 
  $('table tr').not ("."+hid).hide();  
$("tr[class=" + hid + "]").show();  
}

＆＃13;

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

＆＃13;

Answer 2

您的数据不是表格数据，因此使用<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了解工作示例。

隐藏动态第n个表行数Jquery

2 个答案: