Спойлер для таблицы JS

203

04 ноября 2017, 16:02

Kак можно реализовать открытие и закрытие данных в таблице по нажатию на ячейку названия таблицы (Microsoft Office и Apple Store)?

Чтобы по нажатию на ячейку с названием изначально была закрыта информация под ней, и так же открывалась по следующему нажатию.

Как можно реализовать открытие и закрытие информации под шапкой для каждой таблицы?

<script type="text/javascript" src="bjsfull.js"></script> 
 
<body> 
  <table id="users_list"> 
    <tr> 
      <td class="no-padding"> 
        <table cellspacing="0" cellpadding="0" v-bind:id=" 'tblTeam' + indexteam" class="tblTeam"> 
          <thead> 
            <tr> 
              <th class="title_team" style=" font-size:14pt !important; padding: 20px 20px !important; background-color: #002C5E !important; color:white"><i class="fa fa-users" aria-hidden="true"></i> &nbsp;Microsoft Office 
              </th> 
            </tr> 
          </thead> 
          <tbody> 
            <tr> 
              <td class="no-padding"> 
                <table cellspacing="0" cellpadding="0" class="tblGroup" style="background: cornflowerblue;"> 
                  <thead> 
                    <tr for="spoiler2"> 
                      <th class="spoiler"> 
                        <i class="fa fa-folder-open" aria-hidden="true"></i>Developer Team 1 
                      </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">John Sina</td> 
                      <td>johnsinaitspower@gmail.com</td> 
                      <td style="width: 200px; padding-right: 24px;" class="text-right">+79837164834</td> 
                    </tr> 
                  </tbody> 
                </table> 
              </td> 
            </tr> 
          </tbody> 
        </table> 
        <table cellspacing="0" cellpadding="0" v-bind:id=" 'tblTeam' + indexteam" class="tblTeam"> 
          <thead> 
            <tr> 
              <th class="title_team" style=" font-size:14pt !important; padding: 20px 20px !important; background-color: #002C5E !important; color:white"><i class="fa fa-users" aria-hidden="true"></i> &nbsp;Apple Store 
              </th> 
            </tr> 
          </thead> 
          <br> 
          <tbody> 
            <tr> 
              <td class="no-padding"> 
                <table cellspacing="0" cellpadding="0" class="tblGroup" style="background: cornflowerblue;"> 
                  <thead> 
                    <tr for="spoiler2"> 
                      <th class="spoiler"> 
                        <i class="fa fa-folder-open" aria-hidden="true"></i>Developer Team 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">John Sina</td> 
                      <td>johnsinaitspower@gmail.com</td> 
                      <td style="width: 200px; padding-right: 24px;" class="text-right">+79837164834</td> 
                    </tr> 
                  </tbody> 
                </table> 
              </td> 
            </tr> 
          </tbody> 
        </table> 
      </td> 
    </tr> 
  </table> 
</body>

Answer 1

Я запутался с вашей структурой таблицы и решил сделать пример на похожей но упрощенной. Если не разберетесь задавайте вопросы.

$("thead").on("click", function() { 
$(this).parent("table").find("tbody").eq($(this).index($("thead"))).css("display", "block"); 
});

.maintable tbody { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="maintable"> 
  <thead> 
    <th class="title_team" style="font-size:14pt; padding: 20px 20px; background-color: #002C5E; color:white">Microsoft Office</th> 
  </thead> 
  <tbody><tr><td>Spoiler 1</td></tr></tbody> 
 
  <thead> 
    <th class="title_team" style="font-size:14pt; padding: 20px 20px; background-color: #002C5E; color:white">Microsoft Office</th> 
  </thead> 
  <tbody><tr><td>Spoiler 2</td></tr></tbody> 
</table>