Filter Table

by humanzing

HTML

<div class="content-area">
  <select class="menu">
    <option value="">- Select colour -</option>
    <option value="btc">btc</option>
    <option value="colour-blue">Blue</option>
    <option value="colour-green">Green</option>
  </select>

  <div class="content-bar btc">
    <div class="itemnum">Binance</div>
    <div class="itemtitle">10:18</div>
    <div class="itemprice">CHZUSDT</div>
    <div class="itemstock">$6.00K</div>
    <div class="btncontainer">
      <button class="cbbtn"><i class="fa fa-pencil" aria-hidden="true"></i><img style="margin-top: -3px;" src="https://cdn.coinglasscdn.com/static/exchanges/2502.png" class="css-1ifhear"></button>
    </div>
  </div>
  <div class="content-bar">
    <div class="itemnum">#0001</div>
    <div class="itemtitle">Socks Gray</div>
    <div class="itemprice">$19.99 ea</div>
    <div class="itemstock">15 In Stock</div>
    <div class="btncontainer">
      <button class="cbbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="content-bar">
    <div class="itemnum">#0002</div>
    <div class="itemtitle">Socks Black</div>
    <div class="itemprice">$19.99 ea</div>
    <div class="itemstock">12 In Stock</div>
    <div class="btncontainer">
      <button class="cbbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="content-bar">
    <div class="itemnum">#0003</div>
    <div class="itemtitle">Socks White</div>
    <div class="itemprice">$19.99 ea</div>
    <div class="itemstock">22 In Stock</div>
    <div class="btncontainer">
      <button class="cbbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="content-bar">
    <div class="itemnum">#0004</div>
    <div class="itemtitle">Clean Spray</div>
    <div class="itemprice">$7.99 ea</div>
    <div class="itemstock">9 In Stock</div>
    <div class="btncontainer">
      <button class="cbbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
  ...

CSS

body{
background: linear-gradient(#7ad1ff, #3a99de) fixed;
  font-family: 'Rubik', sans-serif;
  margin:0;
}
.content-area{
  background-color: #f6f6fc;
  width:100vw;
  height:100vh;
  border-radius: 0px 12px 12px 0px;
}
.content-bar{
  width: calc(100% - 40px);
  margin-left:20px;
  margin-top:10px;
  background:#fff;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.06);
  border-radius:12px;
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: 0fr 1fr 1fr 3fr 0fr;
}
.page-title{
  font-weight:500;
  font-size:26px;
  padding-left:20px;
  padding-top:20px;
}
.page-desc{
  padding-left:20px;
  font-weight:300;
  color:#525252;
}
.logo{
  font-family: 'Rubik', sans-serif;
  font-weight:600;
  font-size:70px;
  background: -webkit-linear-gradient(#4d4d4d, #171717);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align:center;
  margin-top:20px;
  padding:0px;
  margin-bottom:20px;
}
.search{
  border-left:1px solid #dfe2e6;
  border-top:1px solid #dfe2e6;
  border-bottom:1px solid #dfe2e6;
  border-right:1px none;
  border-radius:12px 0px 0px 12px;
  padding:10px;
  margin-left:20px;
  width: 145px;
  font-family: 'Rubik', sans-serif;
  font-weight:300;
  color:#525252;
}
.search:focus{
  outline:none;
}
.sbtn{
  padding:10px;
  padding-right:15px;
  padding-left:15px;
  background:none;
  border-radius: 0px 12px 12px 0px;
  border-right:1px solid #dfe2e6;
  border-top:1px solid #dfe2e6;
  border-bottom:1px solid #dfe2e6;
  border-left:1px none;
  transform:translate(-4px, 0px);
  color: #d0d4d9;
  cursor:pointer;
}
.sbtn:focus{
  outline:none;
}
.sbtn:hover{
  color:#a8adb3;
}
.sbtn:active{
  color:black;
}
.spacer{
  margin:20px;
}
.mbtn{
  border-radius:12px;
  text-align:left;
  margin-left:20px;
  width:210px;
  height:40px;
  border:none;
  background:none;
  font-family: 'Rubik', sans-serif;
  font-size:18px;
  color:#d0d4d9;
  transition-duration:0ms;
  cursor:pointer;
}
.icon{
  padding-left:20px;
 ...

JavaScript

console.clear();

window.onload = function () {
  // DOM is ready .. 
  
  // get the colour selection box 
  var selectMenu = document.querySelector(".menu");
  // get the table rows having the paint colours ...
  let tableData = document.querySelectorAll(".content-bar")
      console.log(tableData.length)

  let tableRows = tableData;

  // monitor the select box selection change ..
  selectMenu.onchange = function () {
      console.log("change")
  
    // get selected colour ..
    let select = this.value;
console.log(select)
    if (select !== "") {
      // if have a colour selected,
      // - show only rows having that colour.
      console.log(tableData.length)
      for (let i = 0; i < tableRows.length; i++) {
      console.log(tableRows[i])
        let rowTR = tableRows[i];
        if (rowTR.classList.contains(select)) {
          if (rowTR.classList.contains("hide-row")) {
            rowTR.classList.remove("hide-row");
          }
        } else {
          rowTR.classList.add("hide-row");
        }
      }
    } 
    else {
      // no colour selected,
      // - reveal all rows.
      for (let i = 0; i < tableRows.length; i++) {
        let rowTR = tableRows[i];
        if (rowTR.classList.contains("hide-row")) {
          rowTR.classList.remove("hide-row");
        }
      }
    }
  };
};