changing only the particular table content color using css and javascript

Question

hi everyone, I am displaying data in a table on one of my web pages. When the user clicks on a row, I want that row ONLY to change color. I'd settle for that cell. I have a css file referenced on the page with two styles, td_on and td_off, which have same settings except for the background colors. I put the "class" tag in the td like so:

<td align="center" class="td_off" >

I have tried to use the onclick action to change the class to the td_on style like so, onclick="class=td_on" but this does NOT cause any changes. Can someone pls tell me what the proper syntax for doing this is ... or maybe an easier way to accomplish???! thanks in advance.

Answer 1

Pretty easy to do this with jQuery, here's to change the table cell color:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script>
    $(document).ready(function() {

        $('td').bind('click',function() {
            $(this).css('background-color','red');
        });


    });
</script>

Or change: $(this).css('background-color','red'); to $(this).parent().css('background-color','red');, if you want to change the colour of the whole row.

Answer 2

Hi Patel

Try this:

<td align="center" onclick="switchClass(this);" class="td_off" >

<script>
function switchClass(td)
{
  if(td.className == 'td_off')
  {
    td.className = 'td_on';
  }
  else
  {
    td.className = 'td_off';
  }
}
</script>