JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div>
  <label for="capacitySelect">Capacity:</label>
  <select id="capacitySelect" onchange="filterTable()">
    <option value="">Select Capacity</option>
    <!-- options generated by js -->
  </select>
  <label><input type="checkbox" id="withVideo" onclick="filterTable()"> with video</label>
  <label for="interiorSelect">Interior/Exterior:</label>
  <select id="interiorSelect" onchange="filterTable()">
    <option value="">All</option>
    <option value="Interior">Interior</option>
    <option value="Exterior">Exterior</option>
  </select>
  <div class="dropdown">
    <button class="dropdown-button" onclick="toggleDropdown(event)">AV Required</button>
    <div class="dropdown-content">
      <input type="checkbox" id="selfService" name="av" onclick="filterTable(); updateButtonBackground()"> Self service<br>
      <input type="checkbox" id="wiredWireless" name="av" onclick="filterTable(); updateButtonBackground()"> Wired + wireless laptop connection<br>
      <input type="checkbox" id="inRoomPC" name="av" onclick="filterTable(); updateButtonBackground()"> In room PC
    </div>
  </div>
  <button onclick="resetFilters()">Reset Filters</button>
</div>

<table id="roomTable">
  <thead>
    <tr>
      <th>Room</th>
      <th>Capacity/Type</th>
      <th>Interior/Interior</th>
      <th>AV Capabilities</th>
      <th>Display Size</th>
      <th>Photo</th>
    </tr>
  </thead>
  <tbody id="roomRows">
    <tr data-maxcap="16" data-maxcapV="15" data-intex="ext" data-ss="y" data-wiredwireless="y" data-roompc="y">
      <td>802</td>
      <td>
        <ul>
          <li>16/15 (with video)</li>
          <li>Conference room</li>
        </ul>
      </td>
      <td>Exterior</td>
      <td>
        <ul>
          <li>Self service</li>
          <li>Wired + wireless laptop connection</li>
          <li>In room PC</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>65-inch</li>
          <li>Single screen</li>
        </ul>
      </td>
      <td><img...

CSS

table {
     width: 100%;
     border-collapse: collapse;
   }

   th,
   td {
     border-bottom: 1px solid #000;
     padding: 8px;
     text-align: left;
   }

   th {
     color: #140be3;
     border-bottom: 3px solid #140be3;
   }

   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   ul>li:before {
     content: "– ";
     color: #140be3;
   }

   .dropdown {
     position: relative;
     display: inline-block;
   }

   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     padding: 10px;
     z-index: 1;
   }

   .dropdown-button {
     background-color: #f1f1f1;
     /* Default background */
     border: none;
     cursor: pointer;
     padding: 8px;
     margin-top: 2px;
   }

   .dropdown-button.checked {
     background-color: #140be3;
     /* Background when something is checked */
     color: #fff;
   }

JavaScript

document.addEventListener('DOMContentLoaded', function() {
// add capacity numbers
  var select = document.getElementById('capacitySelect');
  for (var i = 2; i <= 20; i += 2) {
    var option = document.createElement('option');
    option.value = i;
    option.text = i;
    select.appendChild(option);
  }

  // close dropdown if clicked outside
  document.addEventListener('click', function(event) {
    var dropdownContent = document.querySelector('.dropdown-content');
    if (!dropdownContent.contains(event.target) && !document.querySelector('.dropdown-button').contains(event.target)) {
      dropdownContent.style.display = 'none';
    }
  });
});

function toggleDropdown(event) {
  event.stopPropagation();
  var content = document.querySelector('.dropdown-content');
  content.style.display = content.style.display === 'block' ? 'none' : 'block';
}

// change button background color is a checkbox is selected
function updateButtonBackground() {
  var button = document.querySelector('.dropdown-button');
  var checkboxes = document.querySelectorAll('.dropdown-content input[type="checkbox"]');
  var checked = Array.from(checkboxes).some(checkbox => checkbox.checked);
  if (checked) {
    button.classList.add('checked');
  } else {
    button.classList.remove('checked');
  }
}

function filterTable() {
  var capacityValue = document.getElementById("capacitySelect").value ? parseInt(document.getElementById("capacitySelect").value) : null;
  var videoChecked = document.getElementById("withVideo").checked;
  var interiorFilter = document.getElementById("interiorSelect").value.toLowerCase();
  var ss = document.getElementById("selfService").checked;
  var wiredWireless = document.getElementById("wiredWireless").checked;
  var inRoomPC = document.getElementById("inRoomPC").checked;
  var table = document.getElementById("roomRows");
  var tr = table.getElementsByTagName("tr");

  for (var i = 0; i < tr.length; i++) {
    var maxcap =...