2

Как прописать путь с помощью .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", скрывалось или показывалось содержимое

2
  • добро пожаловать на Stack Overflow на русском! текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса 9 ноя 2017 в 11:54
  • @alexanderbarakin добавил, спасибо за уточнение. 9 ноя 2017 в 11:58

1 ответ 1

0

Нужная Вам таблица достается выражением $('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>

9
  • На данный моменет jQuery работает с таблицей которая находится вне <div>, а я пытаюсь задать путь ко второй, которая именно находится в дивах. Как я понимаю, JS определяет по class="spoilerclick" и по заданному пути в начале скрипта: t = $(this).parent(".spoilerclick").find("tbody").eq($(this).index($("thead"))); 9 ноя 2017 в 13:17
  • @VladDanishevsky Четко сформулируйте какая таблица Вам нужна? Мой код не подошел? Таблица в диве описывается так $('div table') 9 ноя 2017 в 13:21
  • Таблице в div'e имеющая класс "maintable". Как заставить JQuery код изложенный мной выше работать именно с ней? 9 ноя 2017 в 13:24
  • @VladDanishevsky а теперь еще уточните, что должен делать Ваш код? При клике на заголовок скрывать/показывать данные? 9 ноя 2017 в 13:30
  • Да, верно, это реализация спойлера по клику. 9 ноя 2017 в 13:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.