单击时更改表格行的背景颜色

Change background color of a table row on click

本文关键字：背景 颜色 表格 单击      更新时间：2023-09-26
在我的

网页上，我有一个表格，我想更改一行的背景，在此过程中，单击该行时检查与该行对应的单选按钮。我使用jquery尝试了以下内容：

<style>
  .active { background-color: #8fc3f7;}
</style>  
<script>
$(document).ready(function() 
  {
    $('#reqtablenew tr').click(function () 
       {
         $('#reqtablenew tr').removeClass("active");
         $(this).addClass("active");
       });
  });
<script>

任何关于我可能做错了什么或任何解决方法的想法都将非常受欢迎。我在页面中包含以下脚本。src="http://code.jquery.com/jquery-1.9.1.js"> 和 src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"

这是我桌子的小提琴http://jsfiddle.net/Gz668/5/

你忘了添加jquery

在 css 中添加这个 

tr.active td {
   background-color: #8fc3f7;
}

我已经将您的演示更新为此

更新以检查radio尝试此操作，

$(this).find('[name="reqradio"]').prop('checked',true);

完整代码

$(document).ready(function () {
    $('#reqtablenew tr').click(function () {
        $('#reqtablenew tr').removeClass("active");
        $(this).addClass("active");
        $(this).find('[name="reqradio"]').prop('checked',true);
    });
});

演示

问题是td也有背景色

.newreqtable td {
   .....
   background-color:#ffffff;

所以你需要强制执行你的活动类，例如

tr.active td{background-color: #8fc3f7;}

看到这个： http://jsfiddle.net/Gz668/9/

像这样... ：

$(this).find('input').prop('checked', true);

.. 将检查单击行的单选按钮。

[小提琴] （http://jsfiddle.net/McNull/LwT9N/）

相关文章：