Как изменить цвет текста щелкнутой строки таблицы с помощью css и jquery

Question

В таблице мне нужно изменить цвет всего текста щелкнутой строки, что-то вроде this без цвета фона. Тот же код не работает для меня.

Это код с фрагментом:

$("#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

Используется для этого найти свой td и определить ваш CSS только .done класс не 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>

Answer 2

Измените свой jQuery, как показано ниже.

1. Удалить selected класс из всех строк -
2. Добавить selected класс текущий/выбранный ряд.

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

Updated Fiddle.