Highlight rows depending on month [closed]

Question

I have a table and a input where a person is supposed to enter a month 1-12, and when submitting, the rows from that month should turn red. How do I get the month out of these dates to determine which month they are from? I am unsure how to continue.

 <input type="text" placeholder="Kuukausi" id="searchMonth"/>
            <button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            </div>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr>      

Answer 1

• Use a type="number" input element
• No need to "Submit" buttons.
• Add an ID to tbody
• Use JS TableElement rows and TableRowElement cells objects
• Use the "input" event to trigger a searchMonth() function
• Loop your TBODY TR elements, find the 1th index cell and split its content by . dots to retrieve the month string.
• Check if the splitted date month equals to the inputed one
• Use JS Element.classList.toggle('className', boolean) to toggle the CSS .highlight class

const tbody = document.querySelector("#tableTbody");

const searchMonth = evt => {
  const monthValue = evt.target.value.trim();
  [...tbody.rows].forEach(row => {
    const month = row.cells[1].textContent.split('.')[1];
    row.classList.toggle('highlight', monthValue == month);
  })
};

document.querySelector("#searchMonth").addEventListener('input', searchMonth);

.highlight td {
  background: yellow;
}

<label>Month: <input type="number" id="searchMonth" min=1 max=12></label>

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody id="tableTbody">
    <tr>
      <td>a</td>
      <td>20.4.2018</td>
    </tr>
    <tr>
      <td>b</td>
      <td>14.9.2018</td>
    </tr>
    <tr>
      <td>c</td>
      <td>24.4.2018</td>
    </tr>
    <tr>
      <td>d</td>
      <td>30.3.2018</td>
    </tr>
  </tbody>
</table>

Answer 2

Something like this would work:

// handle click and add class
$('#searchbutton').on("click", function() {
  $('.highlight').removeClass('highlight');
  var rows = $('#table').find('tr');
  var value = $('#searchMonth').val().trim();
  $.each(rows, function() {
    var dateCol = $(this).find('td').eq(1);
    if (dateCol.length > 0) {
      var date = dateCol.text();
      var month = (date.match(/\d{2}.(\d{1,2}).\d{4}/) || [])[1];
      if (month == value) {
        $(this).addClass('highlight');
      }
    }
  });

})

.highlight {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Kuukausi" id="searchMonth"/>
            <button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr> 
            </table>

Answer 3

Firstly, You can get month value by using split like currentText.split(".")[1]

Secondly, The input type of searchMonth should be number to allow number value only.

$("#searchbutton").on("click", function(){
   var searchMonth = $("#searchMonth").val();
   
   $("table tr").each(function(){
      var currentText = $(this).find(":eq(1)").text();
      var currentMonth = currentText.split(".")[1];
      
      var background_color = searchMonth == parseInt(currentMonth) ? "#00ff78" : "";
        $(this).css("background-color", background_color);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" placeholder="Kuukausi" id="searchMonth" value = "4"/>
<button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            </div>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>20.02.2018</td>
            </tr>