JSFiddle - React, Tailwind, and code Playground

by Pavel Popkov

HTML

<input type=button value="кнока для id1" target="id1">
<input type=button value="кнока для id2" target="id2">
<input type=button value="кнока для id3" target="id3">
<input type=button value="кнока для id4" target="id4">
<input type=button value="кнока для id5" target="id5">

<h3>Таблица c рамками</h3>
<table class="brd" id="brd">
  <tr id='id1'>
    <th>Имя</th>
    <th>Фамилия</th>
  </tr>
  <tr id='id2'>
    <td>Лариса</td>
    <td>Исаева</td>
  </tr>
  <tr id='id3'>
    <td>Дмитрий</td>
    <td>Колесников</td>
  </tr>
  <tr id='id4'>
    <td>Дмитрий</td>
    <td>Колесников</td>
  </tr>
  <tr id='id5'>
    <td>Дмитрий</td>
    <td>Колесников</td>
  </tr>
</table>

CSS

.green {
   background-color: rgba(14, 146, 14, 0.5);
 }
 
 .blue {
   background-color: rgba(3, 83, 255, 0.5);
 }

JavaScript

for (var i = 0; i < document.getElementsByTagName("input").length; i++) {
  var k = 0;
  document.getElementsByTagName("input")[i].onclick = function() {
    var cls = "green"
    var table = document.getElementById("brd");
    for (var j = 0, row; row = table.rows[j]; j++) {
      row.className = "";
    }
    k % 2 != 0 ? cls = "green" : cls = "blue";


    document.getElementById(this.getAttribute("target")).className = cls;
    k++;
  };

}