Как изменить цвет ячейки таблицы HTML при нажатии

Я пытаюсь изменить цвет фона ячейки таблицы HTML, когда пользователь нажимает на ячейку. Есть идеи, как это сделать? У меня есть доступ к библиотеке JS Prototype, поэтому буду рад любым предложениям по Prototype или прямому Javascript.


javascript html css html-table cell
person Rohan    schedule 15.09.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Некрасиво, но демонстрирует эффект:

  <table>
    <tr>
        <td onclick="this.style.backgroundColor = 'Red';">Sample</td>
        <td onclick="this.style.backgroundColor = 'Blue';">Data</td>
    </tr>
  </table>
person Larsenal    schedule 15.09.2010

arrow_upward
0
arrow_downward

Я не очень хорошо разбираюсь в фреймворке Prototype, но вот какой-то сырой Javascript, который сделает то, что вы ищете:

var table = document.getElementsByTagName('table')[0];
if(table) table.onclick = function(e) {
    var target = (e || window.event).target;
    if (target.tagName in {TD:1, TH:1})
        target.setAttribute('style', 'background-color: #F00');
};​

Протестируйте на jsFiddle

person Kevin    schedule 15.09.2010

arrow_upward
0
arrow_downward

Вы можете перебрать все дочерние элементы таблицы и добавить к ним событие щелчка.

с прототипом код:

$('your_table').observe('click', function(event) {
  var clickedCell = event.findElement('td');
  if (clickedCell) {
   clickedCell.setStyle({ background: '#dfd' });
  }
});
person lock    schedule 15.09.2010