Как при поиске в таблице подсвечивать совпадения?

Question

[w1kenD]

Реализовал поиск в таблице по столбцам, но не понимаю как сделать чтобы совпадения по столбцам красились в красный цвет.

<table id="contentTable" class="table table-striped table-hover table-dark">
          <thead>
            <tr>
              <th class="cell-center">
                <label>
                  <input type="radio" name="search-column" value="id">Идентификатор
                </label>
              </th>
              <th class="active">
                <label>
                  <input type="radio" name="search-column" value="name">Имя
                </label>
              </th>
              <th>
                <label>
                  <input type="radio" name="search-column" value="surname">Фамилия
                </label>
              </th>
              <th>
                <label>
                  <input type="radio" name="search-column" value="city">Город
                </label>
              </th>
              <th>
                <label>
                  <input type="radio" name="search-column" value="post_index">Почтовый индекс
                </label>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Алексей</td>
              <td>Петров</td>
              <td>Москва</td>
              <td>287023</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Максим</td>
              <td>Горький</td>
              <td>Санкт-Петербург</td>
              <td>348573</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Николай</td>
              <td>Крутой</td>
              <td>Москва</td>
              <td>345634</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Гусейн</td>
              <td>Мирзаев</td>
              <td>Алматы</td>
              <td>678345</td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="hidden">
              <td colspan="5">К сожалению ничего не найдено.</td>
            </tr>
          </tfoot>

function searchInTable(text) {
  text = text.toLowerCase().trim();
  let isFound = false;
  for (let i = 0; i < tableRows.length; i++) {
    let tableData = tableRows[i].getElementsByTagName("td")[
      selectedColumnIndex
    ];
    if (tableData) {
      if (tableData.textContent.toLowerCase().indexOf(text) > -1) {
        tableRows[i].style.display = "";
        // tableRows[i].style.color = "red";
        isFound = true;
      } else {
        tableRows[i].style.display = "none";
      }
      counter = 0;
    }
  }
  if (isFound) {
    notFoundRow.classList.add("hidden");
  } else {
    notFoundRow.classList.remove("hidden");
  }
}

Answer 1

[scottparker]

я хз что у тебя там в функции происходит, откуда берутся переменные типа tableRows, selectedColumnIndex

но вот так можно закрасить 3 ячейку во 2 строке, надеюсь понятно, почему именно эта ячейка закрашивается

let table = document.getElementById('contentTable');
let trs= table.querySelectorAll('tr');
let tds = trs[1].querySelectorAll('td');
tds[2].style.color = 'red';