Проложить путь к элементу таблицы

267

10 ноября 2017, 10:55

Как прописать путь с помощью .parent() к таблице показанной на скриншоте? На данный момент прописанный путь в JS работает с таблицей что сверху. Как можно задать путь только для второй таблицы? Спасибо.

Код JS:

$("thead").on("click", function() { 
  t = $(this).parent(".spoilerclick").find("tbody").eq($(this).index($("thead"))); 
  if (t.css('display') == 'block') { 
    t.css("display", "none"); 
  } else { 
    t.css("display", "block"); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="spoilerclick"> 
  <thead> 
    <th class="title_team" style="font-size:14pt; padding: 20px 20px; background-color: #002C5E; color:white">Table 1</th> 
  </thead> 
  <tbody> 
    <tr> 
      <td>Spoiler 1</td> 
    </tr> 
  </tbody> 
</table> 
<div id="listfilteredcontacts"> 
  <div class="scroll"> 
    <table id="users_list"> 
      <tr> 
        <td class="no-padding"> 
          <table cellspacing="0" cellpadding="0"> 
            <thead> 
              <tr> 
                <th> 
                  <i class="fa fa-users" aria-hidden="true"></i> &nbsp;[[team.team_name]] 
                </th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr v-for="(group, indexgroup) in team.groups" v-bind:id=" 'tr_group' + indexgroup" v-if="contacts_length(group)"> 
                <td class="no-padding"> 
                  <table cellspacing="0" cellpadding="0" v-bind:id=" 'tblGroup' + indexgroup" class="maintable"> 
                    <thead v-bind:class="{hidden : inGroup}"> 
                      <tr for="spoiler2"> 
                        <th class="spoiler" colspan="4"> 
                          <i class="fa fa-folder-open" aria-hidden="true"></i> &nbsp;Table 2 
                        </th> 
                      </tr> 
                    </thead> 
                    <tbody> 
                      <tr> 
                        <td style="width: 50px; "> 
                          <img src="/static/assets/green_avatar.svg" alt="" width="36" height="36"> 
                          <span class="icon_selected"></span></td> 
                        <td style="width: 200px">[[c.first_name]] [[c.last_name]]</td> 
                        <td>[[c.email | truncate(40,'...')]]</td> 
                        <td style="width: 200px; padding-right: 24px;" class="text-right">[[c.phone]]</td> 
                      </tr> 
                    </tbody> 
                  </table> 
                </td> 
              </tr> 
            </tbody> 
          </table> 
        </td> 
      </tr> 
    </table>

Мне нужно, чтобы при клике на заголовке таблицы, которая лежит в div'e и имеет класс "maintable", скрывалось или показывалось содержимое

Answer 1

Нужная Вам таблица достается выражением $('div table.mainclass') (без пробела перед точкой). Заголовок от нее $('div table.mainclass > thead')

И еще, вместо

if (t.css('display') == 'block') {
  t.css("display", "none");
} else {
  t.css("display", "block");
}

проще написать

t.toggle();

Итого получается

$("div table.maintable > thead").on("click", function() { 
  $(this).parent().children("tbody").toggle(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="spoilerclick"> 
  <thead> 
    <th class="title_team" style="font-size:14pt; padding: 20px 20px; background-color: #002C5E; color:white">Table 1</th> 
  </thead> 
  <tbody> 
    <tr> 
      <td>Spoiler 1</td> 
    </tr> 
  </tbody> 
</table> 
<div id="listfilteredcontacts"> 
  <div class="scroll"> 
    <table id="users_list"> 
      <tr> 
        <td class="no-padding"> 
          <table cellspacing="0" cellpadding="0"> 
            <thead> 
              <tr> 
                <th> 
                  <i class="fa fa-users" aria-hidden="true"></i> &nbsp;[[team.team_name]] 
                </th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr v-for="(group, indexgroup) in team.groups" v-bind:id=" 'tr_group' + indexgroup" v-if="contacts_length(group)"> 
                <td class="no-padding"> 
                  <table cellspacing="0" cellpadding="0" v-bind:id=" 'tblGroup' + indexgroup" class="maintable"> 
                    <thead v-bind:class="{hidden : inGroup}"> 
                      <tr for="spoiler2"> 
                        <th class="spoiler" colspan="4"> 
                          <i class="fa fa-folder-open" aria-hidden="true"></i> &nbsp;Table 2 
                        </th> 
                      </tr> 
                    </thead> 
                    <tbody> 
                      <tr> 
                        <td style="width: 50px; "> 
                          <img src="/static/assets/green_avatar.svg" alt="" width="36" height="36"> 
                          <span class="icon_selected"></span></td> 
                        <td style="width: 200px">[[c.first_name]] [[c.last_name]]</td> 
                        <td>[[c.email | truncate(40,'...')]]</td> 
                        <td style="width: 200px; padding-right: 24px;" class="text-right">[[c.phone]]</td> 
                      </tr> 
                    </tbody> 
                  </table> 
                </td> 
              </tr> 
            </tbody> 
          </table> 
        </td> 
      </tr> 
    </table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как создать ссылки из значений массива

Имеется массив произвольной длины, те

180

javascript

Как реализовать такой автокомплит?

Есть вот такой вот сайт у него в поиске интересный автокомплит, подскажите как можно реализовать такой же или подобный? Возможно есть какие...

187

javascript

Как очистить холст навсегда, clearRect()

Суть проблемы: рисую линии на холсте, по клику мышкиВесь холст очищаю clearRect()

246

javascript

Файл js закодировался в 16ти ричный и больше не открывается visual studio

Доброго времени сутокПроблема вот в чём, жил был файл js в командном проекте visual studio TFS, и вдруг захожу утром в vs, а файл перестал открыватся...

184