Группировать по строкам таблицы по значению флажка, используя javascript

Question

Используя javascript или JQuery, есть ли способ сгруппировать эти строки по Office или Возрасту в соответствии с выбранным параметром флажка

, чтобы при установке флажка Office строка таблицы хорошо группировалась по Office. или если установлен флажок Возраст, строка таблицы будет сгруппирована по возрасту.

ID              Office     Age
1111            A          20
2222            B          25  
3333            A          30
4444            C          25
5555            B          30
6666            A          25

например, если флажок Office установлен, то результат должен быть

ID              Office     Age
---------------------------------
A
---------------------------------
1111            A          20
3333            A          30
6666            A          25
---------------------------------
B
---------------------------------
2222            B          25  
5555            B          30
----------------------------------
C
4444            C          25

Answer 1

Если вы продвинутый разработчик, вы можете попытаться решить вашу проблему с помощью плагинов, таких как плагин DataTables. Существует пример для группировки строк .

Если вы просто хотите немного узнать о jQuery и HTML, вы можете создать его самостоятельно. В качестве предложения я покажу вам свой код, который жестко запрограммирован в вашем примере.

$(document).ready(function() {
	
  var originalTableContents = '';

  $('input[name="table-sort"]').on('change', function() {
    insetSortedContents($(this).val());
  });
  
  function insetSortedContents(sorting) {
    var sortedContents = sortTableRecords(sorting);
    var tableBody = $('table tbody');

    if (originalTableContents == '') {
      originalTableContents = sortedContents;
    }
    
    if (sorting == 'nothing') {
      tableBody.empty();
      tableBody.html(objectsToTableRows(originalTableContents, sorting));
    } else {
      tableBody.empty();
      tableBody.html(objectsToTableRows(sortedContents, sorting));
    }
  }
  
  function objectsToTableRows(objects, sorting) {
    var html = '';
    var currentSort = '';
    
    $.each(objects, function(index, object) {
      if (sorting == 'office' && currentSort != object.office) {
      	html += getSeparatorRow(object.office);
      	currentSort = object.office;
      } else if (sorting == 'age' && currentSort != object.age) {
      	html += getSeparatorRow(object.age);
      	currentSort = object.age;
      }
    
      html += '<tr>';
      html += '<td class="cell-id">' + object.id + '</td>';
      html += '<td class="cell-office">' + object.office + '</td>';
      html += '<td class="cell-age">' + object.age + '</td>';
      html += '</tr>';
    });
    
    return html;
  }
  
  function getSeparatorRow(title) {
    return '<tr class="seperator-row"><td colspan="3">' + title + '</td>';
  }
  
  function sortTableRecords(sorting) {
    var tableContents = getTableContents();
    
    if (sorting == 'office') {
    	tableContents.sort(sortByOffice);
    } else if (sorting == 'age') {
    	tableContents.sort(sortByAge);
    }
    
    return tableContents;
  }
  
  function sortByOffice(a, b){
    var a = a.office.toLowerCase();
    var b = b.office.toLowerCase();
    
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  }
  
  function sortByAge(a, b){
    var a = a.age;
    var b = b.age;
    
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  }
  
  function getTableContents() {
    var tableContents = [];
  	
    $('table tbody tr:not(.seperator-row)').each(function(index, elem) {
      tableContents.push(tableRowToObject($(elem)));
    });
    
    return tableContents;
  }
  
  function tableRowToObject(row) {
    return {
      id: parseInt(row.find('.cell-id').text()),
      office: row.find('.cell-office').text(),
      age: parseInt(row.find('.cell-age').text()),
    };
  }
  
});

tr.seperator-row td {
  font-weight: bold;
}

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

<label for="table-sort-reset">
  <input type="radio" id="table-sort-reset" name="table-sort" value="reset" checked="checked" />
  Nothing
</label>

<label for="table-sort-office">
  <input type="radio" id="table-sort-office" name="table-sort" value="office" />
  Office
</label>

<label for="table-sort-age">
  <input type="radio" id="table-sort-age" name="table-sort" value="age" />
  Age
</label>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td class="cell-id">1111</td><td class="cell-office">A</td><td class="cell-age">20</td></tr>
    <tr><td class="cell-id">2222</td><td class="cell-office">B</td><td class="cell-age">25</td></tr>
    <tr><td class="cell-id">3333</td><td class="cell-office">A</td><td class="cell-age">30</td></tr>
    <tr><td class="cell-id">4444</td><td class="cell-office">C</td><td class="cell-age">25</td></tr>
    <tr><td class="cell-id">5555</td><td class="cell-office">B</td><td class="cell-age">30</td></tr>
    <tr><td class="cell-id">6666</td><td class="cell-office">A</td><td class="cell-age">25</td></tr>
  </tbody>
</table>

Надеюсь, у вас есть идеи для решения вашей проблемы.