JSFiddle - React, Tailwind, and code Playground

by xxRSxx

HTML

<table border="0" width="1200" align="center">
  <tr>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Dátum</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Číslo dielu</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Dodací list</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #00aeef; border: 1px solid #000000; font-size: 15px;"><strong>Skontrolovaných</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #40ae49; border: 1px solid #000000; font-size: 15px;"><strong>i.O.</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #d2232a; border: 1px solid #000000; font-size: 15px;"><strong>N.i.O.</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Opravené</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Dôvod reklamácie</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Kontrolór</strong></td>
    <td align="center" valign="top" style="padding: 5px; background-color: #c7c8ca; border: 1px solid #000000; font-size: 15px;"><strong>Počet hodín</strong></td>
  </tr>
  <tr class="row" data-date="6.10.2013" data-part_number="7P6.839.717.B" data-delivery_note="20134710" data-note="" data-controller="Kopkova">
    <td align="center" valign="top" style="padding: 5px; border: 1px solid #000000; font-size: 15px;">6. 10. 2013</td>
    <td align="center" valign="top" style="padding: 5px;...

JavaScript

$(document).ready(function() {
				$("#part_numbers").change(function() {
					var selected_value = $(this).val();
					
					if(selected_value.length > 0) {
						$('.row[data-part_number="' + selected_value + '"]').fadeIn();
						$('.row:not([data-part_number="' + selected_value + '"])').fadeOut();	
					} else {
						$(".row").fadeIn();	
					}
				});
				$("#delivery_notes").change(function() {
					var selected_value = $(this).val();
					
					if(selected_value.length > 0) {
						$('.row[data-delivery_note="' + selected_value + '"]').fadeIn();
						$('.row:not([data-delivery_note="' + selected_value + '"])').fadeOut();	
					} else {
						$(".row").fadeIn();	
					}	
				});

			});