隱藏后如何取消隱藏一行？

Question

以下代碼隱藏了表格的第一行，但當再次單擊復選框時，它不會使第一行再次可見。 有人可以幫忙嗎？

我什至嘗試循環遍歷表格並切換行可見性，但由於 html 中的表格數量，這非常慢。

歡迎提出其他建議。 在 C# 中這樣做太痛苦了。

 $(document).ready(function() { $('#chkNA,#chkSC,#chkNS,#chkIss,#chkIP').click(function() { var row; if (this.id == 'chkNS') { row = $('.TF-StatusNotStarted').closest('tr'); } if (this.id == 'chkSC') { row = $('.TF-StatusCompleted').closest('tr'); } if (this.id == 'chkNA') { row = $('.TF-StatusNA').closest('tr'); } if (this.id == 'chkIss') { row = $('.TF-StatusIssue').closest('tr'); } if (this.id == 'chkIP') { row = $('.TF-StatusInProgress').closest('tr'); } var tabletest = row.parent().parent(); row.toggle(); if (tabletest.find('tbody > tr:gt(0):visible').length > 0) { if (tabletest.find('tbody > tr:first').is(":visible") == false) { tabletest.find('tbody > tr:first').show(); } } if (tabletest.find('tbody > tr:gt(0):visible').length > 0 && tabletest.find('tbody > tr:first').is(':visible')) { tabletest.find('tbody > tr:first').hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="chkNA" type="checkbox" checked="checked"> N/A <input id="chkSC" type="checkbox" checked="checked"> Completed <input id="chkNS" type="checkbox" checked="checked"> Not Started <input id="chkIss" type="checkbox" checked="checked"> Issue <input id="chkIP" type="checkbox" checked="checked"> In Progress <table class="taskform"> <tr> <td> <table class="TF-TaskGroupTable" id="first table" border="1"> <tbody> <tr> <th colspan=3> First Table </th> </tr> <tr> <td> <select class="TF-StatusCompleted"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option selected="selected" value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusCompleted"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option selected="selected" value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusCompleted"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option selected="selected" value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> </tbody> </table> <div> <input type="button" /> </div> <table class="TF-TaskGroupTable" id="Second Table" border="1"> <tbody> <tr> <th colspan=3> Second Table </th> </tr> <tr> <td> <select class="TF-StatusNA"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option selected="selected" value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusCompleted"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option selected="selected" value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusNA"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option selected="selected" value="N/A">N/A</option> </select> </td> </tr> </tbody> </table> <div> <input type="button" /> </div> <table class="TF-TaskGroupTable" id="Third Table" border="1"> <tbody> <tr> <th colspan=3> Third Table </th> </tr> <tr> <td> <select class="TF-StatusNA"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option selected="selected" value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusNA"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option selected="selected" value="N/A">N/A</option> </select> </td> </tr> <tr> <td> <select class="TF-StatusNA"> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option selected="selected" value="N/A">N/A</option> </select> </td> </tr> </tbody> </table> <div> <input type="button" /> </div> </td> </tr> </table>

Answer 1

更新 2

更新了場景以針對 header 行而不是行。

---

更新 1

我已經用相關細節更新了代碼片段，以幫助您為您的場景找到合適的解決方案。

• 添加了具有相同選項的 select
• Select 與正在檢查的輸入具有相同值的選項，
• 如果選中該復選框，它將顯示有效行，否則將隱藏它們

---

初步答案

從您的代碼中，很明顯您正在使用 jQuery 來顯示/隱藏行。 jQuery 具有執行此行為的 3 個函數。 明顯的show()和hide() ，以及不太明顯的toggle() 。 如果您的意圖是“切換”元素的可見性，則應使用toggle()否則您必須自己跟蹤元素的 state。

以下是這些方法的一些參考資料，可以幫助您。

• show()
• hide()
• toggle()

這是一個簡單的例子來幫助你。

 $(function() { function showSelected() { var selected = []; $('input:checked').map(function(idx, elm) { selected.push($(elm).val()); }); $('#report').text(JSON.stringify(selected)); } $('input').click(function(event) { // update the selected report showSelected(); // get the value of this element var value = $(this).val(); // options that have this value and are checked var selector = `option[value="${value}"]:checked`; if ($(this).is(':checked')) { $(selector).closest('table').find('thead tr').show() } else { $(selector).closest('table').find('thead tr').hide() } }); showSelected(); $('input').click(); });

 tbody td { width: 150px } tbody tr.even { background-color: cyan; } tbody tr.odd { background-color: lime; } #report { width: 80%; padding: 4px; background-color: lightgray; border: 1px solid black; min-height: 2rem; } thead tr { background-color: cornflowerblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" value="Not Started"> Not Started <input type="checkbox" value="In Progress"> In Progress <table> <tbody> <tr class="odd"> <td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td> <td> <select> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> <tr class="even"> <td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td> <td> <select> <option value="Not Started">Not Started</option> <option value="In Progress" selected>In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> <tr class="odd"> <td>R3 C1</td> <td>R3 C2</td> <td>R3 C3</td> <td> <select> <option value="Not Started">Not Started</option> <option value="In Progress">In Progress</option> <option value="Completed">Completed</option> <option value="Issue">Issue</option> <option value="N/A">N/A</option> </select> </td> </tr> </tbody> <thead> <tr> <td colspan="4"> This is a table header row </td> </tr> </thead> </table> <pre id="report"> </pre>