未選中復選框時如何隱藏表格行

Question

取消選中復選框后，我希望該表格消失。 它必須僅基於JavaScript（用於學校的運動）。

復選框的創建有效，但是我無法將顯示樣式設置為“無”

還有更多的TR，但是我刪除了大多數TR，因為它對解決下面的代碼沒有任何附加價值。

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); chkbox.type = "checkbox"; chkbox.setAttribute("class", "chkbox"); searchTr[i].appendChild(chkbox); chkbox.checked = true; chkbox.addEventListener("change", hideMe); function hideMe() { searchTr[i].style.display = "none"; } } 

 <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> 

Answer 1

請檢查以下JsFiddle： https ://jsfiddle.net/ulric_469/v0taLbpr/4/

首先，沒有正確給出代碼，還有額外的div。 每次運行for look時，都會得到i的最后一個值。 在您的情況下為3。因此，每當您單擊復選框時，它將搜索位置為3的數組。因此，您會遇到錯誤。

請找到JS代碼：

var searchTr = document.querySelectorAll("#searchTable tr");

           // add checkbox to parent

            for (i = 1; i < searchTr.length; i++) {

                var chkbox = document.createElement("input");
                chkbox.type = "checkbox";
                chkbox.setAttribute("class", "chkbox");
                searchTr[i].appendChild(chkbox);
                chkbox.checked = true;
                chkbox.addEventListener("change",hideMe.bind(this, i));

            }
              function hideMe(i){
                  searchTr[i].style.display = "none";

              }

Answer 2

將hideMe函數置於循環之外。

for (i = 1; i < searchTr.length; i++) {
    var chkbox = document.createElement("input");
    chkbox.type = "checkbox";
    chkbox.setAttribute("class", "chkbox");
    chkbox.setAttribute("id", i);
    searchTr[i].appendChild(chkbox);
    chkbox.checked = true;
    chkbox.addEventListener("change",hideMe);
}

function hideMe(){
    searchTr[this.id].style.display = "none";
}

創建復選框時分配id屬性，隱藏時使用相同的id作為索引。

Answer 3

小提琴： https ://codepen.io/anon/pen/zQbMzR ? editors =1010

添加事件監聽器：

chkbox.addEventListener("change",hideMe);

事件處理程序：

function hideMe(e){ e.target.closest('tr').style.display = "none"; }

e.target被單擊的元素（復選框），. closest（'tr'）為您提供最接近的tr父級。

Answer 4

將表格包裝成表格，並讓表格監聽在任何復選框上發生的任何更改事件。 同樣，每個復選框都必須位於<td>它是無效的HTML，以便將不是<td>或<th>作為<tr>的子<tr> 。 在回調中使用e.target ，它始終指向事件的起點（即，用戶單擊或更改的標簽）。

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (let i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); var cell = searchTr[i].insertCell(); chkbox.type = "checkbox"; chkbox.classList.add("chkbox"); chkbox.checked = true; cell.appendChild(chkbox); } document.querySelector("#ui").addEventListener('change', hide); function hide(e) { e.target.closest('tr').classList.add('hide'); } 

 .hide { visibility: collapse } 

 <form id='ui'> <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> </form>