純javascript復選框過濾行

Question

我有以下代碼。 表格行中比較值的復選框

問題：
1 ) 當表值相同的多行時，它將隱藏所有我想比較的 1 復選框 1 行
2 ) 為什么選中復選框后功能會開始工作？ 我想啟動功能 onload 窗口

小提琴： http : //jsfiddle.net/4sx1pdmn/

有人可以建議我的代碼嗎？

 function filterCondtn1(event) { var element = event.target var condt1 = document.getElementsByClassName("option") for (var i = 0; i < condt1.length; i++) { if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) { if (element.checked == true) { condt1[i].parentElement.style = "display:none" } else { condt1[i].parentElement.style = "display:block" } } } }

 table { border-collapse : collapse; margin : 2em 1em; } td,th { padding : .2em .8em; border : 1px solid darkblue; }

 <div id="InputOpts"> <input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 1 <input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 2 <input type="checkbox" value="2" oninput="filterCondtn1(event);">Option 3 </div> <table id="myTable"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td class="option">1</td> <td>1</td> </tr> <tr> <td class="option">2</td> <td>2</td> </tr> <tr> <td class="option">3</td> <td>3</td> </tr> <tr> <td class="option">1</td> <td>1</td> </tr> </table>

抱歉我的英語不好，無法解釋我需要的所有內容，希望您了解我的需要

Answer 1

您應該使用Set跟蹤您的選擇。 如果您需要多個過濾器，則可以改用Map 。 如果啟用該選項，則添加到該集合中，如果禁用該選項，則將其刪除。

使用類隱藏不符合過濾條件的行。

 const filterVals = new Set(); const isValid = (value) => filterVals.size === 0 || filterVals.has(value); const handleInputChange = ({ target: { checked, value } }) => { if (checked) filterVals.add(value); else filterVals.delete(value); updateTableRows(); } const updateTableRows = () => document.querySelectorAll('.option').forEach(option => { option.closest('tr').classList.toggle('hidden-row', !isValid(option.textContent)); }); document.querySelectorAll('#input-opts input[type="checkbox"]') .forEach(input => input.addEventListener('input', handleInputChange));

 table { border-collapse: collapse; } table, th, td { border: thin solid grey; } th, td { padding 0.25em; text-align: center; } .hidden-row { display: none; } #input-opts { margin-bottom: 1em; } #input-opts label { margin-right: 1em; }

 <div id="input-opts"> <label>Name 1 <input type="checkbox" value="1" /></label> <label>Name 2 <input type="checkbox" value="2" /></label> <label>Name 3 <input type="checkbox" value="3" /></label> </div> <table id="my-table"> <thead> <tr><th>Name</th><th>Country</th></tr> </thead> <tbody> <tr><td class="option">1</td><td>1</td></tr> <tr><td class="option">2</td><td>2</td></tr> <tr><td class="option">3</td><td>3</td></tr> <tr><td class="option">1</td><td>1</td></tr> </tbody> </table>

Answer 2

一種方法來做到這一點

 const TD_option = [...document.querySelectorAll('#myTable td.option')] // make an array .map(el=>( // of objects { val, el } { val : el.textContent.trim().toLowerCase() , tr : el.closest('tr') })) ; document .querySelectorAll('#InputOpts input[type="checkbox"]') .forEach( ckbx => { ckbx.checked = true // all are displayed on document load let chkVal = ckbx.value.toLowerCase() ckbx.oninput = e => { TD_option.forEach( row => { if (chkVal == row.val ) row.tr.classList.toggle('noDisplay', !ckbx.checked ) }) } })

 table { border-collapse : collapse; margin : 2em 1em; } td,th { padding : .2em .8em; border : 1px solid darkblue; } .noDisplay { display: none; }

 <div id="InputOpts"> <label><input type="checkbox" value="1">Option 1</label> <label><input type="checkbox" value="2">Option 2</label> <label><input type="checkbox" value="3">Option 3</label> </div> <table id="myTable"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td class="option">1</td> <td>1</td> </tr> <tr> <td class="option">2</td> <td>2</td> </tr> <tr> <td class="option">3</td> <td>3</td> </tr> <tr> <td class="option">1</td> <td>1</td> </tr> </table>