JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<select id="filter">
    <option value='ALL' selected="selected">Select Departure Airport</option>
    <option value="LTN">Luton</option>
    <option value="LGW">Gatwick</option>
    <option value="LGW">Gatwick</option>
    <option value="EMA">East Midlands</option>
</select>

<table class="price-table">
    <caption>Airport - XX Nights - XXX 20XX</caption>
    <thead>
        <tr>
            <th data-label=" &ndash; Prices from &pound;XX">Mon</th>
            <th data-label=" &ndash; Prices from &pound;XX">Tues</th>
            <th data-label=" &ndash; Prices from &pound;XX">Weds</th>
            <th data-label=" &ndash; Prices from &pound;XX">Thurs</th>
            <th data-label=" &ndash; Prices from &pound;XX">Fri</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sat</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr class="LGW">
            <td> 
                <span data-label="Mon " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td> 
                <span data-label="Tues " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td>
                <span data-label="Weds " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td>	
                <span data-label="Thurs " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td>	<span data-label="Fri " class="date">XX XXX</span>
	<span class="deal-price">&pound;XXX</span>

            </td>
            <td>	<span data-label="Sat " class="date">XX XXX</span>
	<span class="deal-price">&pound;XXX</span>

            </td>
            <td>	<span data-label="Sun " class="date">XX XXX</span>
	<span class="deal-price">&pound;XXX</span>

            </td>
        </tr>
   ...

CSS

td {border: 3px solid red}
tr.LTN {background: teal}
tr.LGW {background: purple}
tr.EMA {background: lime}

JavaScript

$('#filter').change(function(){
    
    var criteria = $('#filter :selected').val();
   //var row = 
    
    $( ".price-table tr" ).each(function() {
        if($( this ).hasClass()) {
             if (criteria != row){
        alert(row);
        //hide other tbody rows
    } else {
        alert(criteria);
        //show row
    }            
        }
});
        
        /*$(
        //document.getElementsByTagName("tr").className;
    alert(criteria);
    
    //if criteria doesnt match tr class hide
    if (criteria != row){
        alert(row);
        //hide other tbody rows
    } else {
        alert(criteria);
        //show row
    }*/
        
        
    //else if it matches all show 
    //if(criteria == 'ALL'){
    //    $('.all').show();
    //    return;
    //}
    
   

});