Развернуть и свернуть таблицу HTML - PullRequest
Новая
       64

Развернуть и свернуть таблицу HTML

0 голосов
/ 08 октября 2018

Отказ от ответственности: я новичок в HTML, JavaScript и CSS.

Что я пытаюсь сделать, так это развернуть / свернуть таблицу HTML, как показано ниже.При нажатии на «Значения 1» должно отобразиться «Категория 1» (есть и другие категории, но для минимизации кода я только отображал 1 категорию).Затем, нажав «Категория 1», вы увидите дополнительные значения.Проблема заключается в том, что при нажатии на «Значения 1» скрывается только «Категория 1», при этом отображаются значения SubValues.Любые идеи, как я могу легко изменить это с минимальными изменениями кода так, чтобы щелчок по Значениям 1 скрывал и Категория 1, и SubValues.Обратите внимание, что есть также другие категории и подзначения, поэтому они также должны быть скрыты.

В идеале нажатие «Значения 1» должно скрывать все категории и подзначения, а повторное нажатие должно восстанавливать категории и подзначения до того состояния, в котором они были, либо скрыты, либо видимы.

Надеюсь, это имеет смысл.Заранее спасибо

Свернуто:

Collapsed version

Расширено (неверно):

Expanded version

Полностью расширен: enter image description here

< script src = "https://code.jquery.com/jquery-1.11.3.min.js" >
  $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function() {
      $(this).parents().next('.hide').toggle();
    });
  });

$(document).ready(function() {
    $(".expandFRED").click(function() {
      $(".expandSUB1").toggle();
    });
    $(".expandVALS").click(function() {
      $(".expandCAT1").toggle();
    });
  }) <
  /script>
.label tr td label {
  display: block;
}

[data-toggle='toggle'] {
  display: none;
}

.expandSUB1 {
  display: none;
}

. {
  display: none;
}

.expandCAT1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <table class='imagetable' align='center'>
    <caption><b></b></caption>
    <tbody class="labels">
      <tr>
        <td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse)
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse)
        </td>
        <td class='expandSUB1'></td>
        <td class='expandSUB1' align='right'>$461.11
        </td>
        <td class='expandSUB1'></td>
        <td class='expandSUB1' align='right'>$428.33</td>
        <td class='expandSUB1' align='right'>-7.11%
        </td>
        <td class='expandSUB1' align='right'>$-32.78</td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 1</td>
        <td class='expandCAT1' align='right'>0.405582</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>0.405582</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 2</td>
        <td class='expandCAT1' align='right'>1</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>1</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 3</td>
        <td class='expandCAT1' align='right'>1.392379</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>1.407569</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

РЕДАКТИРОВАНИЕ:

Заменить на следующий код: 

$(".expandFRED").click(function() {
  $('.hide').toggle();  
});
$(".expandVALS").click(function() {
  $(".expandCAT1").toggle();
});

Изменение CSS : 

.hide {
  display: none;
}

иудалить ниже: 

.expandSUB1 {
   display: none;
}


$(document).ready(function() {
    $(".expandFRED").click(function() {
      $('.hide').toggle();  
    });
    $(".expandVALS").click(function() {
      $(".expandCAT1").toggle();
    });
  })
.hide {
  display: none;
}

.expandCAT1 {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <table class='imagetable table' align='center'>
    <caption><b></b></caption>
    <tbody class="labels">
      <tr>
        <td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse)
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse)
        </td>
        <td class='expandSUB1'></td>
        <td class='expandSUB1' align='right'>$461.11
        </td>
        <td class='expandSUB1'></td>
        <td class='expandSUB1' align='right'>$428.33</td>
        <td class='expandSUB1' align='right'>-7.11%
        </td>
        <td class='expandSUB1' align='right'>$-32.78</td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 1</td>
        <td class='expandCAT1' align='right'>0.405582</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>0.405582</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 2</td>
        <td class='expandCAT1' align='right'>1</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>1</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
      <tr>
        <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 3</td>
        <td class='expandCAT1' align='right'>1.392379</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1' align='right'>1.407569</td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
        <td class='expandCAT1'></td>
      </tr>
    </tbody>
  </table>
</body>

</html>
0 голосов
/ 08 октября 2018

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

Пожалуйста, примените свой css 

$(document).ready(function() {
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
});

$(document).ready(function() {
  $(".expandFRED").click(function() {
    $(".expandSUB1").toggle();
  });
  $(".expandVALS").click(function() {
    $(".expandCAT1").toggle();
  });
  $(".expandFRED").click(function() {
    $(".hide").toggle();
  });
})
.imagetable {
  border: 1px solid black;
}

.label tr td label {
  display: block;
  border: 1px solid black;
}

td {
  border: 1px solid black;
}

[data-toggle='toggle'] {
  display: block;
}


/*.expandSUB1 {
            display: block;
        }

        .expandFRED {
            display: block;
        }

            .expandCAT1 {
                display: block;
            }*/
<table class='imagetable' align='center'>
  <caption><b></b></caption>
  <tbody class="labels">
    <tr>
      <td class='expandFRED' colspan='7'>
        Values 1 (click here to expand/collapse)
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class='expandSUB1 expandVALS'>
        Category 1 (click here to expand/collapse)
      </td>
      <td class='expandSUB1'></td>
      <td class='expandSUB1' align='right'>
        $461.11
      </td>
      <td class='expandSUB1'></td>
      <td class='expandSUB1' align='right'>$428.33</td>
      <td class='expandSUB1' align='right'>
        -7.11%
      </td>
      <td class='expandSUB1' align='right'>$-32.78</td>
    </tr>
    <tr>
      <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 1</td>
      <td class='expandCAT1' align='right'>0.405582</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1' align='right'>0.405582</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
    </tr>
    <tr>
      <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 2</td>
      <td class='expandCAT1' align='right'>1</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1' align='right'>1</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
    </tr>
    <tr>
      <td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 3</td>
      <td class='expandCAT1' align='right'>1.392379</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1' align='right'>1.407569</td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
      <td class='expandCAT1'></td>
    </tr>
  </tbody>
</table>
...