I jumped in very deep into multiple languages I know very little about, I would very much appreciate some floaties.
The goal is to create a table that can be filtered by drop down checkboxes. Currently one dropdown checkbox works, and I cannot figure out how to make more than one work.
function filter(event, filterCol) {
let element = event.target;
let condt1 = document.getElementsByClassName(filterCol);
var table = document.getElementById("listingTable");
for (let i = 0; i < condt1.length; i ) {
if (condt1[i].innerHTML.toLocaleUpperCase() == element.value.toLocaleUpperCase()) {
if (element.checked == true) {
condt1[i].parentElement.closest('tr').style = "display:table-row"
} else {
condt1[i].parentElement.closest('tr').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")));
document.querySelectorAll('.option3').forEach(input => input.addEventListener('input', ()=>filter(event,"check3")));
document.querySelectorAll('.option4').forEach(input => input.addEventListener('input', ()=>filter(event,"check4")));
document.querySelectorAll('.option5').forEach(input => input.addEventListener('input', ()=>filter(event,"check5")));
document.querySelectorAll('.option6').forEach(input => input.addEventListener('input', ()=>filter(event,"check6")));
document.querySelectorAll('.option7').forEach(input => input.addEventListener('input', ()=>filter(event,"check7")));
document.querySelectorAll('.option8').forEach(input => input.addEventListener('input', ()=>filter(event,"check8")));
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
} .dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
} <div id="list1" tabindex="100">
<span >Spore Print Colour 1</span>
<ul >
<li><label>Brown<input type="checkbox" value="Brown" checked/></label></li>
<li><label>Other<input type="checkbox" value="Other" checked/></label></li>
<li><label>Dark (non-brown)<input type="checkbox" value="Dark (non-brown)" checked/></label></li>
<li><label>Pale<input type="checkbox" value="Pale" checked/></label></li>
<li><label>Pink<input type="checkbox" value="Pink" checked/></label></li>
</ul>
</div>
<div id="list2" tabindex="100">
<span >Spore Print Colour 2</span>
<ul >
<li><label>Chocolate-Brown<input type="checkbox" value="Chocolate-Brown" checked/></label></li>
<li><label>Purple-Brown<input type="checkbox" value="Purple-Brown" checked/></label></li>
<li><label>Gray-Green<input type="checkbox" value="Gray-Green" checked/></label></li>
<li><label>Olive<input type="checkbox" value="Olive" checked/></label></li>
<li><label>Black<input type="checkbox" value="Black" checked/></label></li>
<li><label>White<input type="checkbox" value="White" checked/></label></li>
<li><label>Cream<input type="checkbox" value="Cream" checked/></label></li>
<li><label>Olive-Gray<input type="checkbox" value="Olive-Gray" checked/></label></li>
<li><label>Reddish<input type="checkbox" value="Reddish" checked/></label></li>
<li><label>Dark Brown<input type="checkbox" value="Dark Brown" checked/></label></li>
<li><label>Cinnamon-Brown<input type="checkbox" value="Cinnamon-Brown" checked/></label></li>
<li><label>Brown<input type="checkbox" value="Brown" checked/></label></li>
<li><label>Rusty-brown<input type="checkbox" value="Rusty-brown" checked/></label></li>
<li><label>Yellow-Brown<input type="checkbox" value="Yellow-Brown" checked/></label></li>
<li><label>Olive-brown<input type="checkbox" value="Olive-brown" checked/></label></li>
<li><label>Pink<input type="checkbox" value="Pink" checked/></label></li>
<li><label>Orange-Brown<input type="checkbox" value="Orange-Brown" checked/></label></li>
<li><label>Pink-Brown<input type="checkbox" value="Pink-Brown" checked/></label></li>
<li><label>Pale Yellow<input type="checkbox" value="Pale Yellow" checked/></label></li>
<li><label>Pink-Buff<input type="checkbox" value="Pink-Buff" checked/></label></li>
<li><label>Purple<input type="checkbox" value="Purple" checked/></label></li>
<li><label>Brick Red<input type="checkbox" value="Brick Red" checked/></label></li>
<li><label>Purple - Brown<input type="checkbox" value="Purple - Brown" checked/></label></li>
<li><label>Purple - Black<input type="checkbox" value="Purple - Black" checked/></label></li>
<li><label>Rusty-Brown<input type="checkbox" value="Rusty-Brown" checked/></label></li>
<li><label>Yellow<input type="checkbox" value="Yellow" checked/></label></li>
<li><label>Buff<input type="checkbox" value="Buff" checked/></label></li>
<li><label>Reddish-Brown<input type="checkbox" value="Reddish-Brown" checked/></label></li>
</ul>
</div>
<div id="list3" tabindex="100">
<span >Habitat</span>
<ul >
<li><label>Ground<input type="checkbox" value="Ground" checked/></label></li>
<li><label>Wood<input type="checkbox" value="Wood" checked/></label></li>
<li><label>Dung<input type="checkbox" value="Dung" checked/></label></li>
<li><label>Moss<input type="checkbox" value="Moss" checked/></label></li>
<li><label>Other Mushrooms<input type="checkbox" value="Other Mushrooms" checked/></label></li>
<li><label>Cones<input type="checkbox" value="Cones" checked/></label></li>
</ul>
</div>
<div id="list4" tabindex="100">
<span >Size</span>
<ul >
<li><label>Medium<input type="checkbox" value="Medium" checked/></label></li>
<li><label>Large<input type="checkbox" value="Large" checked/></label></li>
<li><label>Small<input type="checkbox" value="Small" checked/></label></li>
</ul>
</div>
<div id="list5" tabindex="100">
<span >Unique Cap Features</span>
<ul >
<li><label>Fibrous<input type="checkbox" value="Fibrous" checked/></label></li>
<li><label>Scaly<input type="checkbox" value="Scaly" checked/></label></li>
<li><label>None<input type="checkbox" value="None" checked/></label></li>
<li><label>Umbonate<input type="checkbox" value="Umbonate" checked/></label></li>
<li><label>Powdery<input type="checkbox" value="Powdery" checked/></label></li>
<li><label>Warted<input type="checkbox" value="Warted" checked/></label></li>
<li><label>Conical<input type="checkbox" value="Conical" checked/></label></li>
<li><label>Slimy or Sticky<input type="checkbox" value="Slimy or Sticky" checked/></label></li>
<li><label>Striate<input type="checkbox" value="Striate" checked/></label></li>
<li><label>Wrinkled<input type="checkbox" value="Wrinkled" checked/></label></li>
<li><label>Velvety<input type="checkbox" value="Velvety" checked/></label></li>
<li><label>Depressed<input type="checkbox" value="Depressed" checked/></label></li>
<li><label>Funnel Shaped<input type="checkbox" value="Funnel Shaped" checked/></label></li>
<li><label>Plicate Margin<input type="checkbox" value="Plicate Margin" checked/></label></li>
<li><label>Funnel-Shaped<input type="checkbox" value="Funnel-Shaped" checked/></label></li>
<li><label>Inrolled Margin<input type="checkbox" value="Inrolled Margin" checked/></label></li>
<li><label>Hygrophanous<input type="checkbox" value="Hygrophanous" checked/></label></li>
<li><label>Umbo<input type="checkbox" value="Umbo" checked/></label></li>
</ul>
</div>
<div id="list6" tabindex="100">
<span >Unique Stipe Features</span>
<ul >
<li><label>Hollow<input type="checkbox" value="Hollow" checked/></label></li>
<li><label>None<input type="checkbox" value="None" checked/></label></li>
<li><label>Bulbous Base<input type="checkbox" value="Bulbous Base" checked/></label></li>
<li><label>Scaly<input type="checkbox" value="Scaly" checked/></label></li>
<li><label>Powdery<input type="checkbox" value="Powdery" checked/></label></li>
<li><label>Volva<input type="checkbox" value="Volva" checked/></label></li>
<li><label>Fibrous<input type="checkbox" value="Fibrous" checked/></label></li>
<li><label>Slimy or Sticky<input type="checkbox" value="Slimy or Sticky" checked/></label></li>
<li><label>Rooting<input type="checkbox" value="Rooting" checked/></label></li>
<li><label>Velvety<input type="checkbox" value="Velvety" checked/></label></li>
</ul>
</div>
<div id="list1" tabindex="100">
<span >Partial Veil</span>
<ul >
<li><label>Yes<input type="checkbox" value="Yes" checked/></label></li>
<li><label>No<input type="checkbox" value="No" checked/></label></li>
<li><label>nan<input type="checkbox" value="nan" checked/></label></li>
</ul>
</div>
<div id="list7" tabindex="100">
<span >Gill Attachement</span>
<ul >
<li><label>Free<input type="checkbox" value="Free" checked/></label></li>
<li><label>Barely Attached<input type="checkbox" value="Barely Attached" checked/></label></li>
<li><label>Attached<input type="checkbox" value="Attached" checked/></label></li>
<li><label>Notched<input type="checkbox" value="Notched" checked/></label></li>
<li><label>Bluntly Attached<input type="checkbox" value="Bluntly Attached" checked/></label></li>
<li><label>Decurrent<input type="checkbox" value="Decurrent" checked/></label></li>
<li><label>nan<input type="checkbox" value="nan" checked/></label></li>
</ul>
</div>
<table border="1" >
<thead>
<tr style="text-align: right;">
<th>Family Name</th>
<th>Genus Name</th>
<th>Spore Print Colour Description</th>
<th>Spore Print Colour 1</th>
<th>Spore Print Colour 2</th>
<th>Habitat</th>
<th>Habitat Description</th>
<th>Ecology</th>
<th>Size</th>
<th>Unique Cap Features</th>
<th>Cap Description</th>
<th>Partial Veil</th>
<th>Gill Description</th>
<th>Gill Attachement</th>
<th>Unique Stipe Features</th>
<th>Stipe Description</th>
<th>Additional Features of Note</th>
<th>Similar Genera / Look-alikes</th>
<th>Additional Information</th>
<th>Top Five NE Species</th>
<th>Species to Species Identification Difficulty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Agaricaceae</td>
<td>Agaricus sp.</td>
<td>Chocolate-Brown / Purple-Brown</td>
<td >Brown</td>
<td >Chocolate-Brown</td>
<td >Ground</td>
<td>Ground | Various. Roadsides, Grass, Meadows, Woodland... etc.</td>
<td>Saprobic</td>
<td >Medium</td>
<td >Fibrous</td>
<td>Fibrous / Scaly / None | Glabrous or with flattened fibers, not brightly coloured. Fleshy</td>
<td>Yes</td>
<td>Free / Barely Attached | Remote from stem. Pink when young. Dark brown and free or almost free at maturity. Close / Crowded</td>
<td>Free</td>
<td >Hollow</td>
<td>Hollow / None | n/a</td>
<td>Medium / Large | Veil: Yes | Flesh thick, white. Usually white / gray / brown. Flesh, cap margin, base of stipe can often bruise yellow / red.</td>
<td>Agrocybe are smaller and don't always have a partial veil.</td>
<td>Chemical Reactions: KOH- negative or yellow-orange</td>
<td>Agaricus bitorquis, Agaricus arvensis, Agaricus campestris, Agaricus nanaugustus, Agaricus xanthodermus</td>
<td>Contains many species. Some are easy, some are extremely difficult.</td>
</tr>The var checklist is what controls the dropdown and I have messed around with it in however many ways my brain could come up with, but more than one drop down never works.
Thanks in advance!
ps. if you have any ideas for how to make the table rows unique while still being able to use them to filter, please let me know. likely be a future post on here...
CodePudding user response：
You can use document.getElementsByClassName (or document.querySelectorAll) to get all the checkList elements, then apply the same logic to each of them.
let checkLists = document.getElementsByClassName('dropdown-check-list');
for(let i = 0; i < checkLists.length; i ) {
let checkList = checkLists[i];
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
}