CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Cucko Oooo
Cucko Oooo

Reputation: 91

Change colour of td in dynamic table generated in php

I'm creating a PHP script that will dynamically generate tr and td elements for a table. When the user clicks in a specific cell in the first column, an AJAX function executes to display additional content. This is working as it should, however, I'm having trouble with what should be simple styling. When the user clicks on a given cell, I want that row to change colour (works) until they click on another cell (doesn't work).

Since my PHP file is rather large, I'm only posting the relevant parts. 

<?php
 $myFiles = showMyAttrs();
 foreach($myFiles as $myFile) {
echo("<tr class = 'gradeC' onClick = 'changeColour(this)' onchange = 'restoreColour(this)' >");
echo("<td onClick = 'sendCell(this)' ><img src = $msEx /></td>");
echo("<td>$myFile</td>");
echo("</tr>");
}

I've also tried using onblur instead of onchange but that gave the same result.

The Javascript functions:

function changeColour(z) {
  z.style.backgroundColor = "#FFFFFF";
}

function restoreColour(y) {
  y.style.backgroundColor = "#00FF00";
}

Before I also tried:

function changeColour(z) {
  document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
  z.style.backgroundColor = "#FFFFFF";
  <!-- document.getElementsByTagName("td").style.backgroundColor = "#00FF00"; -->
}

function changeColour(z) {
  z.style.backgroundColor = "#FFFFFF";
  document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
}

$('tr').click(function() {
  $('tr').css('backgroundColor', '#0F0');
  $(this).css('backgroundColor', '#FFF');
});

With each of them (except the last), the colour does change to white, however, when the user clicks on any other row, the previous row doesn't return to green. I don't mind if this works with Javascript or JQuery, as long as it is compatible across browsers. Even a fancy CSS trick I'm fine with using.

Upvotes: 1

Views: 1211

Answers (2)

dlane
dlane

Reputation: 1131

You're on the right track. I think adding/removing a class would be a good way to go. You could try this:

jQuery

$('tr').on('click', function() {
  $('tr').children('td').removeClass('active');
  $(this).children('td').addClass('active');
});

CSS

.active { background-color: yellow; }

See jsFiddle

Upvotes: 0

Nouphal.M
Nouphal.M

Reputation: 6344

Try using a css class to assign the background color:

$('.gradeC td').on('click',function(e){
   if(!$(this).closest('tr').hasClass('green')){ 
      $(this).closest('tr').addClass('green');
    }else{
     $(this).closest('tr').removeClass('green');   
    }
});

See demo here

Upvotes: 0

Related Questions