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

时间:2013-11-14 06:24:06

标签: javascript jquery css

在我的网页上,我有一个表格,我想更改一行的背景,并在此过程中,单击该行时,检查该行对应的单选按钮。我使用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” &GT;和src =“http://code.jquery.com/ui/1.10.3/jquery-ui.js”

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

3 个答案:

答案 0 :(得分:6)

您忘了添加jquery

css

中添加此内容
tr.active td {
   background-color: #8fc3f7;
}

我已将您的演示更新为this

已更新以检查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);
    });
});

Demo

答案 1 :(得分:2)

问题是td也有背景颜色

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

因此,您需要强制执行您的活动类,例如

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

请参阅:http://jsfiddle.net/Gz668/9/

答案 2 :(得分:2)

像这样......:

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

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

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

相关问题