JSFiddle - React, Tailwind, and code Playground

by Teodor Sandu

HTML

<html>
<head>
</head>

<body>
<select id="year">
  <option value="0">All</option>
</select>

<table id="options-table">
  <tbody>   
    <tr>
      <td>06/05/2018</td> 
      <td>16:00h</td> 
      <td>Chris</td>
    </tr>

    <tr>
      <td>24/10/2019</td> 
      <td>20:00h</td> 
      <td>Alex</td>
    </tr>

    <tr>
      <td>11/03/2018</td>
      <td>15:00h</td>
      <td>Dani</td>                     
    </tr>

    <tr>
      <td>08/04/2019</td>
      <td>12:30h</td>
      <td>Joe</td>  
    </tr>

    <tr>
      <td>22/04/2018</td>
      <td>10:30h</td>
      <td>Mike</td>
    </tr>
  </tbody>
</table>            


<script>
var select = document.getElementById("year");
var table = document.getElementById("options-table");
var options = ["2018", "2019"];

for(var i = 0; i < options.length; i++) {
   var opt = options[i];
   var el = document.createElement("option");
     el.textContent = opt;
     el.value = opt;
     select.appendChild(el);
}

select.addEventListener('change', function () {
	for (var i = 0, length = table.rows.length; i < length; i++) {
  	var row = table.rows[i];
    var date = row.cells && row.cells[0] && row.cells[0].innerText;
    if (!+select.value || date && date.split('/').pop() == select.value) {
    	row.style.display = '';
    } else {
    	row.style.display = 'none';
    }
  }
});
</script>


</body>
</html>