Мне нужно скрыть строки таблицы в зависимости от их содержимого - PullRequest
Новая
       3

Мне нужно скрыть строки таблицы в зависимости от их содержимого

0 голосов
/ 26 января 2019

У меня есть простая таблица доменов и поддоменов.

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 и добавьте к строкам, которые необходимо скрыть.

1 Ответ

0 голосов
/ 26 января 2019

Вы можете добавить класс для <td> имени домена, используя следующий селектор css, затем выполнить цикл по строкам и используя .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...