Toggle table - увеличьте диапазон строк, чтобы разместить дополнительную переключенную строку - PullRequest
Новая
       19

Toggle table - увеличьте диапазон строк, чтобы разместить дополнительную переключенную строку

3 голосов
/ 21 июня 2019

У меня есть таблица, которую можно прекрасно переключать кнопкой или щелкая по строке.Проблема в том, что, когда 1-й столбец занимает 2 или более строк, все не синхронизировано.Также хотелось бы, чтобы нижняя граница перемещалась под переключаемой областью, а цвет фона накрытой области выравнивался с дополнительными строками (в настоящее время работает только с 1-й строкой из-за диапазона строк).Надеюсь, это имеет смысл, и кто-то может помочь с этим. 

$(document).ready(function() {
  $("#hide").click(function() {
    $(".toggle").hide();
  });
  $("#show").click(function() {
    $(".toggle").show();
  });
  $("#data tr td").click(function() {
    $(this).parents(".pointer").next().toggle();
  });
});
table {
  border-collapse: collapse;
  margin-top: 20px;
}

table,
th {
  border: solid 1px;
  padding: 10px;
}

tr:hover td {
    background: #e5e5e5;
}

.toggle {
  display: none;
}

.toggle.active {
  display: table-row;
}

.pointer {
  cursor: pointer;
  border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="hide">Hide All</button>
<button id="show">Show All</button>
<table>
  <tr>
    <th>header</th>
    <th>header</th>
    <th>header</th>
    <th>header</th>
    <th>header</th>
  </tr>
  <tbody id="data">
  <tr class="pointer">
      <td style="border-bottom:1px solid;" >DATA1</td>
      <td style="border-bottom:1px solid;">data1</td>
      <td style="border-bottom:1px solid;">data1</td>
      <td style="border-bottom:1px solid;">data1</td>
      <td style="border-bottom:1px solid;">data1</td>
    </tr>
    <tr class="toggle">
      <td></td>
      <td colspan="4">toggled area 1a</td>
    </tr>
    <tr class="pointer">
      <td  style="border-bottom:1px solid;" rowspan="2">DATA2</td>
      <td>data2</td>
      <td>data2</td>
      <td>data2</td>
      <td>data2</td>
    </tr>
    <tr class="toggle">
      <td></td>
      <td colspan="4">toggled area 2a</td>
    </tr>
    <tr class="pointer">
      <td style="border-bottom:1px solid;">data2</td>
      <td style="border-bottom:1px solid;">data2</td>
      <td style="border-bottom:1px solid;">data2</td>
      <td style="border-bottom:1px solid;">data2</td>
    </tr>
    <tr class="toggle">
      <td></td>
      <td colspan="4">toggled area 2b</td>
    </tr>
    <tr class="pointer">
      <td rowspan="3">DATA3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr class="toggle">
      <td></td>
      <td colspan="4">toggled area 3a</td>
    </tr>
    <tr class="pointer">
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr class="toggle">
     <td></td>
      <td colspan="4">toggled area 3b</td>
    </tr>
    <tr class="pointer">
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr class="toggle">
      <td></td>
      <td colspan="4">toggled area 3c</td>
    </tr>
  </tbody>
</table>

1 Ответ

1 голос
/ 21 июня 2019
  • Сначала оберните каждую область данных в <tbody>.
  • Все tr.toggle должны иметь только один <td> и должны иметь colspan='4'
  • Только первый <td> каждого <tbody> имеет класс.pointer и rowspan равны количеству первоначально видимых строк указанного <tbody>. ex. first <tbody> изначально имеет одну строку, поэтому td.pointer в этом <tbody> имеет rowspan='1'.
  • Когда <td> отличается от<td>, вложенный в tr.toggle, щелкается и теперь виден, соответствующее .pointer rowspan увеличивается на 1.
  • .pointer rowspan уменьшается на 1, когда tr.toggleне виден.
  • Последний <tr> области данных 1 и 2 имеет неклейкий символ <td colspan='5'>, который содержит <hr>.

$("#all").on('click', function(e) {
  $(this).toggleClass('show hide');
  toggleRow(e);
});

$('.pointer').on('click', toggleRow);
$("td").not('.toggle > td').on('click', toggleRow);

function toggleRow(e) {
  if (e.target.matches('td')) {
    var toggle = $(this).parent().next('.toggle');
    var data = $(this).closest('tbody');
    var pointer = data.find('.pointer');
    var rowspan = Number(pointer.attr('rowspan'));
    toggle.toggle();
    if (toggle.is(':visible')) {
      pointer.prop('rowspan', `${rowspan+=1}`);
      if (e.target.matches('.borderA')) {
        data.find('.borderA').css('border-width', '0');
      }
    } else {
      pointer.prop('rowspan', `${rowspan-=1}`);
      if (e.target.matches('.borderA')) {
        data.find('.borderA').css('border-width', '1px');
      }
    }
  } else if (e.target.matches('#all')) {
    $('tbody').each(function() {
      var pointer = $(this).find('.pointer');
      var rows = $(this).children().length;
      var rowspan = Number(pointer.attr('rowspan'));
      if ($('#all').hasClass('hide')) {
        $('.toggle').show();
        pointer.attr('rowspan', rows);
        $(this).find('.borderA').css('border-width', '0');
      } else {
        $('.toggle').hide();
        pointer.attr('rowspan', rowspan);
        $(this).find('.borderA').css('border-width', '1px');
      }
    });
  }
  return false;
};
table {
  margin-top: 20px;
  border-spacing: 0;
}

table,
th {
  border: solid 1px #000;
}

tr:hover td,
tbody:hover .pointer {
  background: #e5e5e5;
}

.toggle {
  display: none;
  text-align: center
}

.pointer {
  border: 0;
  border-bottom: 1px solid #000;
}

.border,
.borderA {
  border-bottom: 1px solid #000;
}

#all {
  width: 10ch;
}

#all.hide::before {
  content: 'Hide ';
}

#all.show::before {
  content: 'Show ';
}
<button id="all" class='show'>All</button>

<table>
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="pointer show" rowspan='1'>DATA1</th>
      <td class='borderA'>data1</td>
      <td class='borderA'>data1</td>
      <td class='borderA'>data1</td>
      <td class='borderA'>data1</td>
    </tr>
    <tr class="toggle">
      <td class='border' colspan="4">1A</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th class='pointer show' rowspan="2">DATA2</th>
      <td>data2</td>
      <td>data2</td>
      <td>data2</td>
      <td>data2</td>
    </tr>
    <tr class="toggle">
      <td colspan="4">2A</td>
    </tr>
    <tr>
      <td class='borderA'>data2</td>
      <td class='borderA'>data2</td>
      <td class='borderA'>data2</td>
      <td class='borderA'>data2</td>
    </tr>
    <tr class="toggle">
      <td class='border' colspan="4">2B</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th class="pointer show" rowspan="3">DATA3</th>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr class="toggle">
      <td colspan="4">3A</td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr class="toggle">
      <td colspan="4">3B</td>
    </tr>
    <tr>
      <td class='borderA'>data3</td>
      <td class='borderA'>data3</td>
      <td class='borderA'>data3</td>
      <td class='borderA'>data3</td>
    </tr>
    <tr class="toggle">
      <td class='border' colspan="4">3C</td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...