[英]How to change the text color of the clicked row of table with css and jquery
In a table, 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.
相同的代码对我不起作用。
This is the code with a snippet : 这是带有代码段的代码:
$("#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>
Modify your jQuery as below. 如下修改您的jQuery。
selected
class from all rows - selected
类- selected
class to current/selected row. selected
类添加到当前/选定的行。 $("tbody tr").click(function() {
console.log('clicked');
$("tbody tr").removeClass('selected');
$(this).addClass('selected');
});
Updated Fiddle . 更新小提琴 。
Used to this find your td
and define your css only .done
class not tr .done
用来找到您的
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.