Cancel onclick action

Question

There are 200 buttons (so far only 4 to simplify their task). Each button, when pressed, should highlight a specific row in the table. But when you click on another button, the previous onclick should cancel its action. ID on the buttons and in the table will be recorded manually. The problem is that the number of buttons and rows in the table will be dynamic on each page.

 <input type=button value="зеленый" onClick="id1.bgColor= '#006400'"> <input type=button value="зеленый" onClick="id2.bgColor= '#006400'"> <input type=button value="зеленый" onClick="id3.bgColor= '#006400'"> <input type=button value="зеленый" onClick="id4.bgColor= '#006400'"> <h3>Таблица c рамками</h3> <table class="brd"> <tr id='id1'> <th>Имя</th> <th>Фамилия</th> </tr> <tr id='id2'> <td>Лариса</td> <td>Исаева</td> </tr> <tr id='id3'> <td>Дмитрий</td> <td>Колесников</td> </tr> <tr id='id4'> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>

Andrew B 1.605 four sixteen · Accepted Answer · 2016-10-24T12:15:30

 for (var i = 0; i < document.getElementsByTagName("input").length; i++) { var k = 0; document.getElementsByTagName("input")[i].onclick = function() { var cls = "green" var table = document.getElementById("brd"); for (var j = 0, row; row = table.rows[j]; j++) { row.className = ""; } k % 2 != 0 ? cls = "green" : cls = "blue"; document.getElementById(this.getAttribute("target")).className = cls; k++; }; }

 .green { background-color: rgba(14, 146, 14, 0.5); } .blue { background-color: rgba(3, 83, 255, 0.5); }

 <input type=button value="кнока для id1" target="id1"> <input type=button value="кнока для id2" target="id2"> <input type=button value="кнока для id3" target="id3"> <input type=button value="кнока для id4" target="id4"> <h3>Таблица c рамками</h3> <table class="brd" id="brd"> <tr id='id1'> <th>Имя</th> <th>Фамилия</th> </tr> <tr id='id2'> <td>Лариса</td> <td>Исаева</td> </tr> <tr id='id3'> <td>Дмитрий</td> <td>Колесников</td> </tr> <tr id='id4'> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>

There is another question: the code jsfiddle.net/statkr/c2rtra8g works.
And when I try to start it locally in the html page it does not work.

user207618 · Answer 2 · 2016-10-24T12:09:43

Save the link to the last painted element and remove the paint from it, if necessary:

 let table = document.querySelector('.brd'), prevEl = null, prevColor = null; document.querySelector('#buttonsWrapper').addEventListener('click', function(e){ let target = e.target, button = target.closest('input[data-rowId]'); if(!button || !this.contains(button)) return; highlight(button); }); function highlight(btn){ let id = parseInt(btn.dataset.rowid, 10), color = btn.dataset.rowcolor; if(prevEl) prevEl.style.color = prevColor; let tr = table.querySelector(`#id${id}`); if(!tr) throw new Error(`Line number ${id} is not found!`); prevEl = tr; prevColor = getComputedStyle(tr, null).color; tr.style.color = color; }

 <div id='buttonsWrapper'> <input type=button value="зеленый" data-rowId='1' data-rowColor='#006400'> <input type=button value="зеленый" data-rowId='2' data-rowColor='#006400'> <input type=button value="зеленый" data-rowId='3' data-rowColor='#006400'> <input type=button value="зеленый" data-rowId='4' data-rowColor='#006400'> </div> <hr /> <h3>Таблица c рамками</h3> <table class="brd"> <tr id='id1' style='color: blue;'> <th>Имя</th> <th>Фамилия</th> </tr> <tr id='id2'> <td>Лариса</td> <td>Исаева</td> </tr> <tr id='id3' style='color: red;'> <td>Дмитрий</td> <td>Колесников</td> </tr> <tr id='id4'> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>

Answer 3 · 2016-10-24T11:59:04

Create a global variable and write there the id of the selected line (or close all by closing)

 var selId; function _click(id) { if (selId) document.getElementById(selId).bgColor = "#FFFFFF"; document.getElementById(id).bgColor = "#006400"; selId = id; }

 <input type=button value="зеленый" onClick="_click('id1')"> <input type=button value="зеленый" onClick="_click('id2')"> <input type=button value="зеленый" onClick="_click('id3')"> <input type=button value="зеленый" onClick="_click('id4')"> <h3>Таблица c рамками</h3> <table class="brd"> <tr id='id1'> <th>Имя</th> <th>Фамилия</th> </tr> <tr id='id2'> <td>Лариса</td> <td>Исаева</td> </tr> <tr id='id3'> <td>Дмитрий</td> <td>Колесников</td> </tr> <tr id='id4'> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>

@Qwertiy, my grandmother told me: “Do not use global objects. They are evil” :) Corrected

Cancel onclick action

3 answers 3

More articles: