Is there a way to change the text color of a row in a table when it is clicked, similar to an example like this but without changing the background color? The code I have tried is not working for me.
Below is a snippet of the code I am using:
$("#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>