How to change table cell background in Javascript

Question

I have such table in HTML:

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

How to change cell's background on mouse move in this cell? If cursor moves away from the cell, background must stay, but if the cursor move to the other cell, it must reset background.

What exactly is your question about - the JS part, the CSS part...? At the moment, this looks like a "write the full code for me" type question. — Pekka
– Pekka, Commented Oct 11, 2010 at 11:22
Frameworks is not used. It would be great if I could only use css. — Anton Kandybo
– Anton Kandybo, Commented Oct 11, 2010 at 12:00

fcalderan · Accepted Answer · 2010-10-11 11:46:26Z

1

since you need one cell highlighted, if you're including jQuery you could use this code.

(function() {

   var current_cell;

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

and then just use a bit of css

td#highlight {
  background: ... ;
}

answered Oct 11, 2010 at 11:46

fcalderan

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change table cell background in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related