How to change backgorund-color in table cells when clicked?

Question

It is necessary that when you click on any cell in the table, the background-color change takes place. At the same time, in other cells in which the background-color change has already background-color , its original value should be restored. That is, if you click on the first cell, then it should become a red background-color , and in the second and third cells should become blue and so for each cell.

How can I do that?

 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>

Accepted Answer · 2017-10-23T19:32:51

id of each element must be unique!
You need to get all the td in the table, then return them to the blue color and put the red color to the current td :

 function func(obj) { var nodes = document.querySelectorAll('td'); [].forEach.call(nodes, function(el) { el.style.backgroundColor = '#0D4585'; }); obj.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);"> <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);"> <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);"> <p class="title_column_static">Completati</p> <p class="number_pending_interview_static text-center">0</p> </td> <!-- лишний код </div> </td> --> </tr> <!-- лишний код </a> --> </table>

UPD: a variant of the function in which the background-color change occurs only in the parent table td :

 function func(obj) { var parent_obj = obj.closest("table"); var nodes = parent_obj.querySelectorAll('td'); [].forEach.call(nodes, function(el) { el.style.backgroundColor = '#0D4585'; }); obj.style.backgroundColor = 'red'; };

 .other_table{ width:400px; height:40px; background-color: #BFD0FF; } #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 class="other_table"> <tr> <td>test table</td> </tr> </table> <table border="1" style="border-collapse: inherit;" onload="cell_count();"> <tr> <td id="static_button" onclick="func(this);"> <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);"> <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);"> <p class="title_column_static">Completati</p> <p class="number_pending_interview_static text-center">0</p> </td> <!-- лишний код </div> </td> --> </tr> <!-- лишний код </a> --> </table>

Interested in the question: is it possible to make it so that he would not take everything <td>, namely this one?
@OlegSevernuy given td it obj.style.backgroundColor = 'red'; takes: obj.style.backgroundColor = 'red';
Please specify, do you mean that it takes td only from a certain table or another?
Yes, so that he would not touch the other <td>, is it possible to implement?
Now I ran into the problem that when I use this code, it touches the header, which also consists of <td>.
I would like to know if there are ways to affect exactly <td> which is in the table?
@OlegSevernuy You need only change document.querySelectorAll to parent_obj.querySelectorAll , where parent_obj is the parent of the current object (table).
Thus sampling will go no longer from the entire dom , but from the current table .

Tima tru tima tru 91 3 · Answer 2 · 2017-10-23T19:37:08

Hi, id should be unique for the whole document. Further, in essence, you do not need id. It is enough to use a class that is uniform for all cells. When clicking, you can assign all elements a base color, with the exception of the element on which they click. And on the element that is clicked, you can apply element.classList.toggle ("red"); Look in the this console for the td element. watch fiddle

 function initListener(){ getCells().forEach(el => el.addEventListener('click',toggleColor)); } function toggleColor() { setBaseColor(this); this.classList.toggle("red"); }; function setBaseColor(currentCell){ filteredCells = getCells().filter(el => el.classList.contains('red')); filteredCells.forEach(cell => { if(cell.cellIndex !== currentCell.cellIndex) cell.classList.remove('red'); }) }; function getCells(){ return Array.from(document.getElementsByClassName("static_button")); }; initListener();

Answer 3 · 2017-10-23T19:26:58

Unique id for each button. And the class is one. We assign a common style to the class (as you did for id). And with the help of js we get all the buttons with this class and for each in the cycle we reset the color to the standard one. And then select the click.

 function func(obj_id) { var elem = document.getElementById(obj_id); var x = document.getElementsByClassName("btn"); for (var z = 0; z < x.length; z++) { x[z].style.backgroundColor = '#0D4585'; } elem.style.backgroundColor = 'red'; };

 .btn { 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; } .btn:hover { background-color: #002c5e; } .btn: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" class='btn' 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_button2" class='btn' 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_button3" class='btn' 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>

How to change backgorund-color in table cells when clicked?

3 answers 3

More articles: