So ändern Sie die Textfarbe der angeklickten Zeile der Tabelle mit CSS und JQuery

Question

In einer Tabelle muss ich die Farbe des gesamten Textes der Zeile ändern, die geklickt wird, etwa this ohne die Hintergrundfarbe. Derselbe Code funktioniert nicht für mich.

Dies ist der Code mit einem Code-Schnipsel:

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

zu benutzten Ihre td zu finden und Ihre CSS nur .done Klasse definieren nicht 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

Ändern Sie Ihre jQuery wie folgt.

1. entfernen selected Klasse aus allen Reihen -
2. hinzufügen selected Klasse Strom/ausgewählte Zeile.

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

Updated Fiddle.