Как выделять определенный элемент в таблице в зависимости от ее обновления?

Question

Допустим у меня есть такая таблица, 3х3, со значениями, в ней есть максимальный элемент, он выделен определенным цветом.

Таблица периодически обновляется, то есть элемент может меняться. Как можно сделать так, чтобы с обновлением таблицы можно было динамично менять фон нужному максимальному элементу?

Answer 1

Ну например, можно сделать так. Я написал функцию colorizeMaxValueAtCells, которая красит ячейку с наибольшим целым числом. Можете кастомизировать под себя. Что не понятно - спрашивайте. В моем примере добавляются ячейки с другими значениями, но в вашем варианте с обновлением уже существующих работать будет тоже. Главное вызвать функцию colorizeMaxValueAtCells после обновления

// colorize function

const getMaxValue = (array) => array.reduce((acc, value) => {
  if (acc === null) {
    return value
  }
  
  if (value > acc) {
    acc = value 
  }
  return acc
}, null)

const getElementValue = (el) => parseInt(el.textContent)

const colorizeMaxValueAtCells = () => {
  const cells = [...document.querySelectorAll('.table-cell')]
  const allValues = cells.map(getElementValue)
  
  const maxValue = getMaxValue(allValues)
  
  const cellWithMaxValue = cells.find((el) => getElementValue(el) === maxValue)
  
  cells.forEach((el) => el.classList.remove('table-cell--max'))
  cellWithMaxValue.classList.add('table-cell--max')
}

colorizeMaxValueAtCells()

// my logic for add cells. It can be different. Use 'colorizeMaxValueAtCells' when you update cells

const getRandomInt = () => Math.floor(Math.random() * 100)

const addCellWithRandomValue = () => {
  const row = document.querySelector('.table-row')
  
  const newCell = document.createElement('td')
  newCell.classList.add('table-cell')
  newCell.textContent = getRandomInt()
  
  row.append(newCell)
}

const addBtn = document.getElementById('add-cell')
addBtn.addEventListener('click', () => {
  addCellWithRandomValue()
  colorizeMaxValueAtCells()
})

* {
  font-family: sans-serif;
  font-weight: bold;
}

table {
  margin-bottom: 1rem;
}

.table-cell,
.btn {
  padding: 0.5rem 1rem;
  border: 2px solid black;
}

.table-cell--max {
  background-color: orangered;
}

.btn {
  border-radius: 50rem;
  text-transform: uppercase;
  cursor: pointer;
}

<table>
  <tbody>
    <tr class="table-row">
      <td class="table-cell">1</td>
      <td class="table-cell">3</td>
      <td class="table-cell">2</td>
    </tr>
  </tbody>
</table>

<button class="btn" id="add-cell">Add random cell</button>

БЛОГ НА HUSL

Как выделять определенный элемент в таблице в зависимости от ее обновления?

Ответы (1 шт):