1

Имеется 200 кнопочек (пока только 4 для упрощения своей задачи). Каждая кнопка при ее нажатии должна подсвечивать определенную строку таблицы. Но при нажатии на другую кнопку, предыдущий onclick должен отменить свое действие. ID на кнопках и в таблице будут прописываться вручную. Проблема том, что количество кнопок и строк таблице будет динамичным на каждой странице.

<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>

1
  • 1
    Прочитайте статью - лишним не будет.
    – Andrew B
    24 окт 2016 в 12:14

3 ответа 3

1

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>

1
  • Можно еще вопрос: код jsfiddle.net/statkr/c2rtra8g работает. а когда локально в html страничке его пытаюсь запустить не работает.
    – Павел
    24 окт 2016 в 14:37
0

Сохраняем ссылку на последний покрашенный элемент и убираем краску с него, если нужно:

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>

0

Создайте глобальную переменную и записывайте туда id выделенной строки (или закройте все замыканием)

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>

5
  • А как это сделать? я только начал заниматься js
    – Павел
    24 окт 2016 в 12:06
  • @Павел В смысле "как это сделать"? Я же привел код 24 окт 2016 в 12:07
  • Который не работает?)
    – Qwertiy
    24 окт 2016 в 12:51
  • @Qwertiy вот говорила мне бабушка: "Не используй глобальные объекты. Они зло" :) Исправил 24 окт 2016 в 12:55
  • Да, теперь работает...
    – Qwertiy
    24 окт 2016 в 12:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.