I need to hide table rows depending on their content

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

$(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:

If it's empty - this is a domain. Add EventListener to it, so on click it will show/hide it's subdomains.
If it's not empty - check domain_name textContect and add to rows that need to be hidden.

Answer 1

You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest() . The firstIndex is to determine the row without subdomain value

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

I need to hide table rows depending on their content

Question

1 answers

solution1
0 ACCPTED 2019-01-26 09:09:13

I need to hide table rows depending on their content

Question

1 answers

solution1 0 ACCPTED 2019-01-26 09:09:13

solution1
0 ACCPTED 2019-01-26 09:09:13