如何使用css和jquery更改所单击的表行的文本颜色

Question

在表格中，我需要更改所单击行的所有文本的颜色，例如this，而不使用背景颜色。相同的代码对我不起作用。

这是带代码段的代码：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修改你的jQuery，如下所示。

1. 从所有行中删除selected类 -
2. 将selected类添加到当前/所选行。

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

Updated Fiddle

Answer 2

用于查找您的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>