我需要根據表格內容隱藏表格行

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>

我需要根據表格內容隱藏表格行

問題描述

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