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

Question

On my webpage, I have a table and I'd like to change the background of a row, and in the process, check the radio button corresponding to that row when the row is clicked. I tried the following using jquery :

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

Any thoughts as to what I might be doing wrong or any workaround would be very welcome. I have included the following scripts in the page. src="http://code.jquery.com/jquery-1.9.1.js"> and src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"

Here's a fiddle of my table http://jsfiddle.net/Gz668/5/

Answer 1

You forgot to add jquery

Add this in you css

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

I have updated your demo to this

Updated to check the radio try this,

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

Full Code

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

Demo

Answer 2

The problem is the td got background color too

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

So you need to enforce your active class, eg

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

See this: http://jsfiddle.net/Gz668/9/

Answer 3

Something like this ... :

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

.. will check the radiobutton of the clicked row.

[Fiddle] ( http://jsfiddle.net/McNull/LwT9N/ )