JSFiddle - React, Tailwind, and code Playground

by WizardCoder

HTML

<script>
$(document).ready(function () {  
 $('.ResetCalendarFilter').click(function () {
	    var values = [];
$('select').prop('selectedIndex', 0);
	     $('.filter').each(function () {
	        var colIdx = $(this).data('col');

	         $(this).find('option:selected').each(function () {
	             if ($(this).val() != "") values.push( {
	                text: $(this).text(),
	                colId : colIdx
	             });
	        });
	    });
	    filter('table > tbody > tr', values);
	});

	function filter(selector, values) {console.log(values);
	    $(selector).each(function () {
	        var sel = $(this);
	        var tokens = sel.text().trim().split('\n');
	        var toknesObj = [], i;
	        for(i=0;i<tokens.length;i++){
	            toknesObj[i] = {
	               text:tokens[i].trim(), 
	               found:false
	            };
	        }

	        var show = false;
	        //console.log(toknesObj);
	        $.each(values, function (i, val) {                

	       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
	           toknesObj[val.colId].found = true;
	          }

	        });          
	        console.log(toknesObj);
	        var count = 0;
	         $.each(toknesObj, function (i, val) {
	             if (val.found){
	                 count+=1;
	             }
	         });
	        show = (count === values.length);        
	        show ? sel.show() : sel.hide();
	    });
  var htmlShow = document.getElementById("calendar-table-id");
  if (htmlShow.style.display === "block") {
    htmlShow.style.display = "none";
  } else {
    htmlShow.style.display = "none";
  }
	}
	});
</script>
<center>
<label for="any">Any</label>
<select id="filteroption1" class="filter" data-col="0">
    <option value="">2012-2017</option>
    <option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2013">2014</option>
	<option value="2013">2015</option>
	<option...

CSS

#calendar-table-id {
display: none;
}

.calendar-table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 100% !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    table-layout: fixed !important;
}

.calendar-table thead tr {
  background-color: #249359;
  color: #ffffff;
  text-align: center;
  font-weight: bolder;
}

.calendar-table th,
.calendar-table td {
  padding: 10px;
  text-align: left;
}

.calendar-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

@media (max-width: 768px) {
.calendar-table tbody tr {
  border-bottom: 3px solid #dddddd;
}
    
table.calendar-table, .calendar-table thead, .calendar-table tbody, .calendar-table th, .calendar-table td, .calendar-table tr {
display: block;
}
.calendar-table thead tr {
 position: absolute;
 top: -9999px;
 left: -9999px;
}
.calendar-table td {
border-bottom: 1px solid #dddddd;
position: relative;
padding-left: 48%;
text-align: left;
}
.calendar-table td:before {
position: absolute;
top: 0;
left: 0;
width: 45%;
background-color: #249359;
color: #ffffff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
}
.calendar-table td:nth-of-type(1):before {
content: "Data";
}
.calendar-table td:nth-of-type(2):before {
content: "Competició";
}
.calendar-table td:nth-of-type(3):before {
content: "Illa";
}
.calendar-table td:nth-of-type(4):before {
content: "Documents";
}
}
	
body,td,th {
	font-family: Verdana;
	font-size:12px;
}

body {
    background-image: url(images/general/background.png);
}

section {
padding: 10px;
background: white;
margin-top: 10px;
border: 1px solid black;
}

.container {
width:1050px;
margin:0px auto;
font-size:1em;
margin-top:70px;
}

#logo {
width: 100%; /* for IE 6 */
text-align: center;
margin-bottom: 5px;
}

.menu {
    background-color: #2d353f;
    font-family: Arial;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 60px;
}

.menu a {
  ...

JavaScript

$(document).ready(function () {  
  $('.CalendarFilter').click(function () {
	    var values = [];

	     $('.filter').each(function () {
	        var colIdx = $(this).data('col');

	         $(this).find('option:selected').each(function () {
	             if ($(this).val() != "") values.push( {
	                text: $(this).text(),
	                colId : colIdx
	             });
	        });
	    });
	    filter('table > tbody > tr', values);
	});

	function filter(selector, values) {console.log(values);
	    $(selector).each(function () {
	        var sel = $(this);
	        var tokens = sel.text().trim().split('\n');
	        var toknesObj = [], i;
	        for(i=0;i<tokens.length;i++){
	            toknesObj[i] = {
	               text:tokens[i].trim(), 
	               found:false
	            };
	        }

	        var show = false;
	        //console.log(toknesObj);
	        $.each(values, function (i, val) {                

	       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
	           toknesObj[val.colId].found = true;
	          }

	        });          
	        console.log(toknesObj);
	        var count = 0;
	         $.each(toknesObj, function (i, val) {
	             if (val.found){
	                 count+=1;
	             }
	         });
	        show = (count === values.length);        
	        show ? sel.show() : sel.hide();
	    });
  var htmlShow = document.getElementById("calendar-table-id");
  if (htmlShow.style.display === "none") {
    htmlShow.style.display = "table";
  } else {
    htmlShow.style.display = "table";
  }
	}
	});