Abhishek Das Abhishek Das - 4 months ago 24
CSS Question

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

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

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


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


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

Answer

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>