JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="filter">Фильтр
  <table border="1">
    <tbody>
      <tr>
        <td>Выпуски</td>
        <td class="filter_item_0">
          <input type="image" title="Частая " src="http://berserk.ru/image/cache/berserk/berserk-filters/87801_cardrarities-30x30.png"/>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.filter_item_0 {
  width: 30px;
  height: 30px;
  background: #0000;
}
.filter_item_1 {
  width: 30px;
  height: 30px;
  background: #0f0;
}
.filter_item_2 {
  width: 30px;
  height: 30px;
  background: #f00;
}

JavaScript

function filter(e) {
  e.target
    .parentElement
    .className = 
    e.target
      .parentElement
      .className
      .endsWith("0") ? "filter_item_1" : e.target.parentElement.className.endsWith("1") ? "filter_item_2" : "filter_item_0";
}
document.querySelector(".filter input[type='image']").addEventListener("click", filter, false);