Необходимо, чтобы при нажатии на любую ячейку таблицы происходила смена background-color
. При этом в других ячейках, в которых уже была смена background-color
должно восстанавливаться его оригинальное значение. То есть, если нажать на первую ячейку, то в ней должен стать красный background-color
, а во второй и третьей ячейках должен стать синий цвет и так для каждой ячейки.
Как это можно сделать?
function func(obj_id) {
var elem = document.getElementById(obj_id);
elem.style.backgroundColor = 'red';
};
#static_button {
background-position: 30px;
background-repeat: no-repeat;
background-color: #0D4585;
width: 200px;
text-align: center;
font-size: 13pt;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 0px 17px;
border: 1px solid #265791;
}
#static_button:hover {
background-color: #002c5e;
}
#static_button:focus {
background-color: white;
}
.title_column_static {
font-size: 10pt;
color: #ffffff;
text-align: center;
}
<table border="1" style="border-collapse: inherit;" onload="cell_count();">
<tr>
<td id="static_button" onclick="func(this.id);">
<p class="title_column_static">Totale</p>
<p class="number_pending_interview_static text-center" id="total_selected">0</p>
</td>
<td id="static_button" onclick="func(this.id);">
<p class="title_column_static">Attesa</p>
<p class="number_pending_interview_static text-center">0</p>
</td>
<td id="static_button" onclick="func(this.id);">
<p class="title_column_static">Completati</p>
<p class="number_pending_interview_static text-center">0</p>
</td>
<!--</div>-->
<!--</td>-->
</tr>
<!--</a>-->
</table>