使用 javascript 按復選框值按表行分組

Question

使用 javascript 或 JQuery，有沒有辦法根據選中的復選框選項按 Office 或 Age 對這些行進行分組

這樣，如果我選中 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>

我希望你有一些想法來解決你的問題。