Цветные ячейки таблицы onclick

Question

У меня есть таблица 5x5, каждая ячейка содержит слово. Когда я нажимаю на слово, я хочу, чтобы цвет ячейки обновлялся до определенного цвета. В приведенном ниже примере таблица настроена с кодированными цветами - я хочу, чтобы они были белыми до тех пор, пока не будет нажата соответствующая надпись.

<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4"> 
    <TR> 
     <TD BGCOLOR="#ffff00">Yellow</TD> 
     <TD BGCOLOR="#00ff00">Green</TD> 
    </TR> 
    <TR> 
     <TD BGCOLOR="#ff00ff">Purple</TD> 
     <TD BGCOLOR="00ffff">Blue</TD> 
    </TR> 
</TABLE> 

Answer 1

Использование JQuery вы можете сделать это:

$('table td').on('click', function() { 
 
    $(this).attr("bgcolor", $(this).attr("data-color")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4> 
 
<TR> 
 
<TD data-color="#ffff00">Yellow 
 
<TD data-color="#00ff00">Green 
 
</TR> 
 
<TR> 
 
<TD data-color="#ff00ff">Purple 
 
<TD data-color="00ffff">Blue 
 
</TD> 
 
</TR> 
 
</TABLE>

Для более крупного проекта я бы рекомендовал выбрать таблицу ID.

Answer 2

Если вы хотите использовать ванильный Javascript, вы можете добавить простой onClick прослушиватель событий и установить цвет. Цвет должен быть сохранен в атрибуте data-bgcolor.

const tableCells = document.querySelectorAll('TD') 
 

 
tableCells.forEach(function (cell) { 
 
    cell.addEventListener('click', function (e) { 
 
    e.target.style.backgroundColor = e.target.dataset.bgcolor; 
 
    }) 
 
})

<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4> 
 
    <TR> 
 
    <TD data-bgcolor="#ffff00">Yellow</TD> 
 
     <TD data-bgcolor="#00ff00">Green</TD> 
 
    </TR> 
 
    <TR> 
 
    <TD data-bgcolor="#ff00ff">Purple</TD> 
 
     <TD data-bgcolor="#00ffff">Blue</TD> 
 
    </TR> 
 
</TABLE>