Форум

JAMLIGHT · #21 (**permalink**) 07.02.2017, 23:27

вижу. второй вариант более гибкий . Грамотно. спасибо. вставлю код себе на сайт. Можете подписать автора

JAMLIGHT · #22 (**permalink**) 23.02.2017, 14:48

Потестил я эти варианты- не подходят потому что мне надо чтобы скрывающим элементом по клику была не строка а ячейка

JAMLIGHT · #23 (**permalink**) 23.02.2017, 15:16

<table border="1" >
   
        <thead>
        
            <tr>

                <th colspan="6">
                
                <table><thead><tr>
        
                <td>Надо развернуть1</td>
          
                <td>Надо развернуть2</td>
          
                <td>Надо развернуть3</td>
          
                <td>Надо развернуть4</td>
          
                <td>Надо развернуть5</td>
          
                <td>Надо развернуть6</td>
             
                </tr></thead></table>
                    
                </th>

           </tr>
              
        </thead>
            
        <tbody>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 1</th>

           </tr>

           <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 2</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 3</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 4</th>

            </tr>
            
            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 5</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 6</th>

            </tr>
       </tbody>

    </table>

JAMLIGHT · #24 (**permalink**) 23.02.2017, 15:17

Как для такой таблицы прописать скрипт?

рони · #25 (**permalink**) 23.02.2017, 15:33

JAMLIGHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .content tr {
      display: none;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

$(function() {
$('.toggle  td').click(function(){
var i = $('.toggle  td').index(this);
$('.content tr').eq(i).toggle();
})});
  </script>
</head>

<body>
<table border="1" >

        <thead>

            <tr>

                <th colspan="6">

                <table><thead><tr class="toggle">

                <td>Надо развернуть1</td>

                <td>Надо развернуть2</td>

                <td>Надо развернуть3</td>

                <td>Надо развернуть4</td>

                <td>Надо развернуть5</td>

                <td>Надо развернуть6</td>

                </tr></thead></table>

                </th>

           </tr>

        </thead>

        <tbody class="content">

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 1</th>

           </tr>

           <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 2</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 3</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 4</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 5</th>

            </tr>

            <tr>

                <th>Ск</th>

                <th>ры</th>

                <th>та</th>

                <th>я ст</th>

                <th>рок</th>

                <th>а 6</th>

            </tr>
       </tbody>

    </table>


</body>
</html>

JAMLIGHT · #26 (**permalink**) 23.02.2017, 18:07

Проблема в том, что мне надо чтобы класс по которому строка скрывается присваивалась конкретно строке а не body таблицы, так как скрываемых строк может быть много. Тут видать через индекс первая ячейка шапки открывает первую строку тела таблицы. А надо чтобы каждая ячейка шапки открывала группу строк с одним соответствующим классом. Таблица у меня будет не из 6 ти строк

рони · #27 (**permalink**) 23.02.2017, 19:30

JAMLIGHT,
у вас уже достаточно примеров, чтобы сделать то что вам нужно. далее раздел работа

JAMLIGHT · #28 (**permalink**) 23.02.2017, 19:56

спасибо за решения

Форум

Справочник

Discord чат

Курсы javascript