Question

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

My Table

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

我需要根据表格内容隐藏表格行

1 个答案: