I have the following codes. checkbox for hide table row
Problem: Filter boolean can't hide of table but hide select option ? I want to hide row
Fiddle: http://jsfiddle.net/ocy8hzux/
Can anyone advise with my codes?
function filter(event, filterCol) {
let element = event.target;
let condt1 = document.getElementsByClassName(filterCol);
for (let i = 0; i < condt1.length; i++) {
if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
if (element.checked == true) {
condt1[i].parentElement.style = ""
} else {
condt1[i].parentElement.style = "display:none"
}
}
}
}
document.querySelectorAll('.option1')
.forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));
document.querySelectorAll('.option2')
.forEach(input => input.addEventListener('input', ()=>filter(event,"check2")));
<div id="input">
<label>Filter Name </label><br>
<label>Human<input class="option1" type="checkbox" value="Human" checked/></label>
<label>Robot<input class="option1" type="checkbox" value="Robot"checked/></label><br><br>
<label>Filter boolean </label><br>
<label>true<input class="option2" type="checkbox" value="true" checked/></label>
<label>false<input class="option2" type="checkbox" value="false" checked/></label>
</div><br>
<table id="my-table">
<thead>
<tr>
<th> Name </th>
<th> boolean </th>
</tr>
</thead>
<tbody>
<tr>
<td class="check1">Robot</td>
<td>
<select>
<option class="check2">true</option>
<option >true</option>
</select>
</td>
</tr>
<tr>
<td class="check1">Human</td>
<td>
<select>
<option class="check2">true</option>
<option >false</option>
</select>
</td>
</tr>
<tr>
<td class="check1">Robot</td>
<td>
<select>
<option class="check2">false</option>
<option >false</option>
</select>
</td>
</tr>
<tr>
<td class="check1">Human</td>
<td>
<select>
<option class="check2">true</option>
<option >true</option>
</select>
</td>
</tr>
</tbody>
</table>
Sorry for my bad English, can't explain all what I need, hope you understand what I need
Thanks !
Aucun commentaire:
Enregistrer un commentaire