Функция для заливки ячейки выбранным цветом

document.addEventListener('DOMContentLoaded', () => { 
  const colors = document.querySelectorAll('.board-colors td') 
 
  colors.forEach(td => td.addEventListener('click', e => { 
    colors.forEach(t => t.classList.remove('selected-color')) 
    e.target.classList.add('selected-color') 
  })) 
 
  document.querySelectorAll('.board td').forEach(td => td.addEventListener('click', e => { 
    const selected = document.querySelector('.board-colors td.selected-color') 
    if (selected) 
      paintCell(e.target.id, selected.style.backgroundColor) 
  })) 
}) 
 
const paintCell = (cellId, color) => 
  document.getElementById(cellId).style.backgroundColor = color

.board, 
.board-colors { 
  margin: 100px auto; 
} 
 
.board td, 
.board-colors td { 
  width: 50px; 
  height: 50px; 
  border: 1px solid #ccc; 
} 
 
.board td:hover, 
.board-colors td:hover, 
.selected-color { 
  border: 1px solid #666; 
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); 
}

<table class="board"> 
  <tr> 
    <td id="cellx0y0"></td> 
    <td id="cellx0y1"></td> 
    <td id="cellx0y2"></td> 
    <td id="cellx0y3"></td> 
    <td id="cellx0y4"></td> 
    <td id="cellx0y5"></td> 
    <td id="cellx0y6"></td> 
    <td id="cellx0y7"></td> 
    <td id="cellx0y8"></td> 
    <td id="cellx0y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx1y0"></td> 
    <td id="cellx1y1"></td> 
    <td id="cellx1y2"></td> 
    <td id="cellx1y3"></td> 
    <td id="cellx1y4"></td> 
    <td id="cellx1y5"></td> 
    <td id="cellx1y6"></td> 
    <td id="cellx1y7"></td> 
    <td id="cellx1y8"></td> 
    <td id="cellx1y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx2y0"></td> 
    <td id="cellx2y1"></td> 
    <td id="cellx2y2"></td> 
    <td id="cellx2y3"></td> 
    <td id="cellx2y4"></td> 
    <td id="cellx2y5"></td> 
    <td id="cellx2y6"></td> 
    <td id="cellx2y7"></td> 
    <td id="cellx2y8"></td> 
    <td id="cellx2y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx3y0"></td> 
    <td id="cellx3y1"></td> 
    <td id="cellx3y2"></td> 
    <td id="cellx3y3"></td> 
    <td id="cellx3y4"></td> 
    <td id="cellx3y5"></td> 
    <td id="cellx3y6"></td> 
    <td id="cellx3y7"></td> 
    <td id="cellx3y8"></td> 
    <td id="cellx3y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx4y0"></td> 
    <td id="cellx4y1"></td> 
    <td id="cellx4y2"></td> 
    <td id="cellx4y3"></td> 
    <td id="cellx4y4"></td> 
    <td id="cellx4y5"></td> 
    <td id="cellx4y6"></td> 
    <td id="cellx4y7"></td> 
    <td id="cellx4y8"></td> 
    <td id="cellx4y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx5y0"></td> 
    <td id="cellx5y1"></td> 
    <td id="cellx5y2"></td> 
    <td id="cellx5y3"></td> 
    <td id="cellx5y4"></td> 
    <td id="cellx5y5"></td> 
    <td id="cellx5y6"></td> 
    <td id="cellx5y7"></td> 
    <td id="cellx5y8"></td> 
    <td id="cellx5y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx6y0"></td> 
    <td id="cellx6y1"></td> 
    <td id="cellx6y2"></td> 
    <td id="cellx6y3"></td> 
    <td id="cellx6y4"></td> 
    <td id="cellx6y5"></td> 
    <td id="cellx6y6"></td> 
    <td id="cellx6y7"></td> 
    <td id="cellx6y8"></td> 
    <td id="cellx6y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx7y0"></td> 
    <td id="cellx7y1"></td> 
    <td id="cellx7y2"></td> 
    <td id="cellx7y3"></td> 
    <td id="cellx7y4"></td> 
    <td id="cellx7y5"></td> 
    <td id="cellx7y6"></td> 
    <td id="cellx7y7"></td> 
    <td id="cellx7y8"></td> 
    <td id="cellx7y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx8y0"></td> 
    <td id="cellx8y1"></td> 
    <td id="cellx8y2"></td> 
    <td id="cellx8y3"></td> 
    <td id="cellx8y4"></td> 
    <td id="cellx8y5"></td> 
    <td id="cellx8y6"></td> 
    <td id="cellx8y7"></td> 
    <td id="cellx8y8"></td> 
    <td id="cellx8y9"></td> 
  </tr> 
  <tr> 
    <td id="cellx9y0"></td> 
    <td id="cellx9y1"></td> 
    <td id="cellx9y2"></td> 
    <td id="cellx9y3"></td> 
    <td id="cellx9y4"></td> 
    <td id="cellx9y5"></td> 
    <td id="cellx9y6"></td> 
    <td id="cellx9y7"></td> 
    <td id="cellx9y8"></td> 
    <td id="cellx9y9"></td> 
  </tr> 
</table> 
<table class="board-colors"> 
  <tr> 
    <td id="color1" style="background-color:#FFCC33"></td> 
    <td id="color2" style="background-color:#FF3300"></td> 
    <td id="color3" style="background-color:#CC00FF"></td> 
    <td id="color4" style="background-color:#3300CC"></td> 
    <td id="color5" style="background-color:#00CCFF"></td> 
    <td id="color6" style="background-color:#66CC00"></td> 
    <td id="color7" style="background-color:#660000"></td> 
    <td id="color8" style="background-color:#000000"></td> 
    <td id="color9" style="background-color:#999999"></td> 
    <td id="color10" style="background-color:#FFFFFF"></td> 
  </tr> 
</table>