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

Question

I have a simple table of domains and subdomains. 我有一个简单的域和子域表。

我的桌子

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

I need to show/hide subdomains when I click on domain row. 单击域行时，我需要显示/隐藏子域。

I tried jQuery slideToggle 我尝试了jQuery slideToggle

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

It works fine when I specify row numbers manually, but I need to find them automatically for every domain/subdomains, because table will grow in size. 当我手动指定行号时，它可以很好地工作，但是我需要为每个域/子域自动找到它们，因为表的大小会增加。

So I need to check subdomain_name textContent: 所以我需要检查subdomain_name textContent：

If it's empty - this is a domain. 如果为空-这是一个域。 Add EventListener to it, so on click it will show/hide it's subdomains. 向其添加EventListener ，因此单击它会显示/隐藏它的子域。
If it's not empty - check domain_name textContect and add to rows that need to be hidden. 如果不为空，请检查domain_name textContect并将其添加到需要隐藏的行中。

Answer 1

You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest() . 您可以使用以下css选择器为域名的<td>添加类，然后在各行之间循环并使用.closest() 。 The firstIndex is to determine the row without subdomain value 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 个解决方案

解决方案1
0 已采纳 2019-01-26 09:09:13

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-26 09:09:13

解决方案1
0 已采纳 2019-01-26 09:09:13