Как я могу адаптировать этот код, чтобы, когда ряд выбран изменения цвета, но также сбрасывается что-нибудь еще, что щелкнуло к исходному цвету. Очевидно, теперь он меняет цветных рядов каждый клик, и все прошлые выбранные ряды цвета остаются прежними.

var tr = document.getElementById("r_row" + r);
for (var c = 0; c < columns; c++) {
    var td = document.createElement("td");
    td.innerText = cellText[c];
    tr.appendChild(td);

    //Makes the rows selectable

    tr.onclick = function(event) {
        selectedItem = this;
        selectedItem.style.background = "#828891";

    }
}
0
Jurdun 12 Мар 2018 в 00:41

1 ответ

Лучший ответ

Альтернативой состоит в том, чтобы добавить класс, I.E selected и проверьте на выбранный TR, используя коллекцию выбираемых TR.

var trs = Array.from(document.querySelectorAll('[id^="r_row"]'));
trs.forEach(function(elem) { 
  elem.addEventListener('click', function() {
    trs.forEach(function(tr) {
      if (tr !== elem) tr.classList.remove('selected');
    });
    
    this.classList.add('selected');
  });
});

function addTRs(ids) {
  var columns = 3;
  ids.forEach(function(r) {
    var tr = document.getElementById("r_row" + r);
    for (var c = 0; c < columns; c++) {
      var td = document.createElement("td");
      td.innerText = `This is a test - ${r}`;
      tr.appendChild(td);
    }
  });
}

addTRs([1, 2]);
.selected {
  background-color: #828891;
}

tr {
  cursor: pointer
}
<table>
  <tbody>
    <tr id='r_row1'></tr>
    <tr id='r_row2'></tr>
    <tr>
      <td colSpan='3'>Not selectable!</td>
    </tr>
  </tbody>
</table>
2
Ele 12 Мар 2018 в 01:10