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

在表格中，我需要更改点击行的所有文本的颜色，类似this而没有背景颜色。相同的代码不适合我。如何使用css和jquery更改点击表的行的文本颜色

这是一个片断代码：

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

来源

2016-08-02 Abhishek Das

它应该是'tr.done'而不是'tr .done'在你的CSS –

看到这里http://jsfiddle.net/jRj8E/70/ – lordkain

用于此找到您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>

来源

2016-08-02 11:42:15

对不起第一次在这里计时！ –

谢谢兄弟！令人惊叹的工作..感谢很多！ –

@AbhishekDas欢迎.... –

修改你的jQuery如下。

从所有的行删除selected类 -
添加selected类电流/选定行。

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

Updated Fiddle。

来源

2016-08-02 11:43:57 Pugazh

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

回答

相关问题