How to change the text color of the clicked row of table with css and jquery

Question

In a table, I need to change the color of all the text of the row that is clicked, something like this without the background color. The same code is not working for me.

This is the code with a snippet :

 $("#myTable tr").on('click', function() { $(this).addClass("done"); }); 

 table { margin: 0 auto; border: 1px solid white; } tr td { padding: 8px 8px 8px 8px; color: #2C3D50; font-weight: 600; } table td .fa { font-size: 1.3em; } .member > tr > td:nth-child(1) { border-right: none; } td:hover { background-color: #00BD9A; color: white; } tr .done{ color: #F7AA25; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <colgroup> <col style="width:70%"> <col style="10%"> <col style="10%"> <col style="10%"> </colgroup> <tbody> <tr> <td>Lorem ipsum dolor sit amet <i class="fa fa-eye pull-right" aria-hidden="true"></i></td> <td><i class="fa fa-share-alt" aria-hidden="true"></i></td> <td><i class="fa fa-download" aria-hidden="true"></i></td> <td><i class="fa fa-envelope-o" aria-hidden="true"></i></td> </tr> <tr> <td>Pellentesque in felis <i class="fa fa-eye pull-right" aria-hidden="true"></i></td> <td><i class="fa fa-share-alt" aria-hidden="true"></i></td> <td><i class="fa fa-download" aria-hidden="true"></i></td> <td><i class="fa fa-envelope-o" aria-hidden="true"></i></td> </tr> </tbody> </table> 

Answer 1

Modify your jQuery as below.

1. Remove selected class from all rows -
2. Add selected class to current/selected row.

$("tbody tr").click(function() {
  console.log('clicked');
  $("tbody tr").removeClass('selected');
  $(this).addClass('selected');
});

Updated Fiddle .

Answer 2

Used to this find your td and define your css only .done class not tr .done

$("#myTable tr").on('click', function() {
    $(this).find('td').addClass("done");
});

 $("#myTable tr").on('click', function() { $(this).find('td').addClass("done"); }); 

 table { margin: 0 auto; border: 1px solid white; } tr td { padding: 8px 8px 8px 8px; color: #2C3D50; font-weight: 600; } table td .fa { font-size: 1.3em; } .member > tr > td:nth-child(1) { border-right: none; } td:hover { background-color: #00BD9A; color: white; } .done{ color: #F7AA25; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <colgroup> <col style="width:70%"> <col style="10%"> <col style="10%"> <col style="10%"> </colgroup> <tbody> <tr> <td>Lorem ipsum dolor sit amet <i class="fa fa-eye pull-right" aria-hidden="true"></i></td> <td><i class="fa fa-share-alt" aria-hidden="true"></i></td> <td><i class="fa fa-download" aria-hidden="true"></i></td> <td><i class="fa fa-envelope-o" aria-hidden="true"></i></td> </tr> <tr> <td>Pellentesque in felis <i class="fa fa-eye pull-right" aria-hidden="true"></i></td> <td><i class="fa fa-share-alt" aria-hidden="true"></i></td> <td><i class="fa fa-download" aria-hidden="true"></i></td> <td><i class="fa fa-envelope-o" aria-hidden="true"></i></td> </tr>