Как развернуть / свернуть всю таблицу HTML после нажатия на определенный объект - PullRequest
Новая
       64

Как развернуть / свернуть всю таблицу HTML после нажатия на определенный объект

0 голосов
/ 28 февраля 2020

У меня есть сценарий html, как показано ниже: 

...
<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>
...

Я хочу развернуть или свернуть всю HTML таблицу , когда я нажимаю "Регистры счетов" текст. Если бы у меня было <h2> внутри таблицы, я бы использовал решение здесь и справился бы с этим, но не смог бы найти решение для текущей ситуации. Как я могу справиться с этим? Обратите внимание, что тег <h2> должен оставаться вне таблицы. Буду признателен за любую помощь или совет.

Ответы [ 4 ]

1 голос
/ 28 февраля 2020

вам нужно использовать javascript для выполнения реальной работы. Вам также нужно что-то в теге или кнопке "a", чтобы вызвать javascript. Должно быть что-то вроде этого. Я не проверял это кстати. 

<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>

<button onclick="myFunction()">Hide/Unhide</button>

<script>
function myFunction() {
  var x = document.getElementById("mytable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
1 голос
/ 28 февраля 2020

Добавьте обработчик кликов к <h2>, который переключает отображение таблицы. Вот рабочий пример: https://jsfiddle.net/ob8p52n6/

1 голос
/ 28 февраля 2020

Если вы ищете анимированную вещь типа «развернуть / свернуть», вам понадобится нечто более сложное, но если вы просто хотите показать / скрыть это, попробуйте следующее: 

function showTable(tableName) {
  const tbl = document.getElementById(tableName);
  tbl.style.display = tbl.style.display === 'none' ? 
    'block' : 'none';
}
#mytable {
  display: none;
}
<h2 onclick="showTable('mytable')">Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>
1 голос
/ 28 февраля 2020

Найти следующий table после этого h2 и переключить его? 

$('h2').click(function () {
  $(this).nextAll('table').eq(0).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

<h2>Something else</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

Бонус

Если вы хотите анимацию, оберните свои таблицы в div (table элементы не могут быть анимированы) : 

$('h2').click(function() {
  $(this).nextAll('.table-wrapper').eq(0).slideToggle(400);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>

<h2>Something else</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>
...