Как изменить фон ячейки таблицы в Javascript

Question

У меня есть такая таблица в HTML:

<table>
    <tr>
        <td>Cell 1</td>
    </tr>
    <tr>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
    </tr>
</table>

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

Answer 1

, поскольку вам нужна выделенная ячейка, если вы используете jQuery, вы можете использовать этот код.

(function() {

   var current_cell;

   $('td').bind('mouseenter', function() {
      if (current_cell) {
         current_cell.removeAttr('id');
      };
      current_cell = $(this);
      current_cell.attr('id', 'highlight');
   });
})();

, а затем просто используйте немного CSS

td#highlight {
  background: ... ;
}