JSFiddle - React, Tailwind, and code Playground

by Miklos Nagy

HTML

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
.tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

</style>
<table class="tg">
  <tr>
    <th class="tg-lboi">Tárhely szolgáltató </th>
    <th class="tg-lboi">Mennyiség</th>
    <th class="tg-lboi">Összeg</th>
  </tr>
  <tr>
    <td class="tg-lboi">Webhold Internet Bt.</td>
    <td class="tg-lboi">1 év</td>
    <td class="tg-lboi">6 500 bruttó</td>
  </tr>
  <tr>
    <td class="tg-0pky">HfHosting.pw (nem ad számlát)</td>
    <td class="tg-0pky">1 év hosszabbítás</td>
    <td class="tg-0pky">6 000 ft nettó</td>
  </tr>
</table>

<style>

.hl{
  background-color: #aaee33 !important;
}</style>

JavaScript

let table = document.querySelectorAll("table")[0];

table.onclick = function(event){

	let clicked = event.target;
  if ( clicked.tagName != "TD") return; 
  
  clicked.classList.toggle("hl");

};