根据表行的内容，我需要隐藏它们。

Question

我有一个域和子域的简单表。

​

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Table</title>
</head>
<body>
    <table>
        <thead>
            <th>doamin_name</th>
            <th>subdoamin_name</th>
        </thead>
        <tr>
            <td>bing.com</td>
            <td></td>
        </tr>
        <tr>
            <td>google.com</td>
            <td></td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>images.google.com</td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>mail.google.com</td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>maps.google.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td></td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>stores.yahoo.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>tw.news.yahoo.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>view.yahoo.com</td>
        </tr>

    </table>
</body>
</html>

单击域行时，需要显示/隐藏子域。

我试过jQuery slideToggle

$(document).ready(function(){
    $(document).on("click", "tbody tr:eq(1)", function(){
        $("tbody tr:nth-child(1n+3)").slideToggle(1000);
    });
});

当我手动指定行号时，它工作得很好，但是我需要为每个域/子域自动找到它们，因为表的大小会增加。

所以我需要检查一下subdomain_name textContent：

• 如果它是空的-这是一个域。将EventListener添加到它，因此单击它将显示/隐藏它的子域。
• 如果不是空的，请检查domain_name textContect并添加到需要隐藏的行中。

Answer 1

您可以使用下面的css选择器为域名的<td>添加类，然后循环遍历这些行并使用.closest()。firstIndex用于确定没有子域值的行。

​

$(document).ready(function(){  
$('tr>td:nth-child(1)').addClass('domainTd');

$(document).on("click", ".domainTd", function(){   
    var domainName= $(this).text();
    var firstIndex=true;
    $('tr>td:nth-child(1)').each(function(index){    
      if($(this).text()===domainName){
        if(firstIndex){
          firstIndex=false;              
        }else{
      	  $(this).closest('tr').slideToggle()
        }   
      }             
    })
  });    
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Table</title>
</head>
<body>
    <table>
        <thead>
            <th>doamin_name</th>
            <th>subdoamin_name</th>
        </thead>
        <tr>
            <td>bing.com</td>
            <td></td>
        </tr>
        <tr>
            <td>google.com</td>
            <td></td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>images.google.com</td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>mail.google.com</td>
        </tr>
        <tr>
            <td>google.com</td>
            <td>maps.google.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td></td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>stores.yahoo.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>tw.news.yahoo.com</td>
        </tr>
        <tr>
            <td>yahoo.com</td>
            <td>view.yahoo.com</td>
        </tr>

    </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

​