如何更改表格中一行的颜色

Question

I'm developing a table in html. Every rows have a checkbox with the same attribute name as tag tr. So I want to color the row selected in yellow if that raw is the unique selected, otherwise color in blue all the rows selected. So I was developing this:

var checked = $("input[@type=checkbox]:checked");  
                var nbChecked = checked.size(); 
                if(nbChecked==1){
                   var row = $('tr[name*="'+checked.attr("name")+'"]');
                   row.style.backgroundColor="#FFFF33";
                }

But color doesn't change :( can you tell me why? can you help me?

<TR valign=top name="<?php echo $not[$j]['name'];?>">
        <TD width=12 style="background-color:#33CCCC">
        <div class="wpmd">
            <div align=center>
                <font color="#FF0000" class="ws7">
                    <input type="checkbox" name="<?php echo $not[$j]['name'];?>" onchange="analizeCheckBox()"/>
            </div>
.
.
.
.
.
.

Answer 1

Although this code doesn't get you all they way to the funcitonality, it does do the row updating.

http://jsfiddle.net/4QKe9/5/

HEre is the Javascript:

function updateRows() {
    var checked = $("input:checked");
    var nbChecked = checked.size();
    if (nbChecked == 1) {
        checked.parent().parent().css("background", "#FFFF33");
    }
}

$(function () { $("input:checkbox").click(updateRows)});​

Answer 2

Firstly, you have got the background color on the cell not the row. You need to move it.

Here's your fixed html:

<table>
  <tr style="vertical-align:top; background-color:#33CCCC">
    <td style="width:12px">
      <div class="wpmd">
        <div class="ws7" style="text-align:center; color:#FF0000">
          <input type="checkbox" />
        </div>
      </div>
    </td>
  </tr>
</table>

and then this script will work

$("td .ws7 input[type=checkbox]").bind({
  click: function()
  {
    if ($(this).is(":checked"))
    {
      $(this).closest("tr").css("background-color", "#ffff33");
    }
    else
    {
      $(this).closest("tr").css("background-color", "#33CCCC");
    }          
  }
});​

change the "td .ws7" selector to match your needs.

Example.

Answer 3

When you call the jQuery function $() with a selector string it will return a jQuery object that is like an array even when only 1 or 0 elements matched . So your code:

row = $('tr[name*="'+checked.attr("name")+'"]');
row.style.backgroundColor="#FFFF33";

Doesn't work because row is not a DOM element with a style property, it's a jQuery object that's like an array with lots of extra methods. The individual DOM elements that matched can be accessed with array-style notation, so:

row[0].style.backgroundColor = "#FFFF33";

Will work to update the first matching DOM element. If nothing matched then row[0] will be undefined and you'll get an error. row.length will tell you how many elements matched.

In your code:

var checked = $("input[@type=checkbox]:checked");

You don't need the @ symbol to match attribute names, so "input[type=checkbox]:checked" is OK, but "input:checkbox:checked" is simpler.

So getting at last to your actual requirement, which is when a single row has a checked box to set that row's background to yellow, but if multiple rows have checked checkboxes to set all those rows' backgrounds to blue, you can do this with only three lines of code:

// reset all trs to default color
$("tr").css("background-color", "yourdefaultcolorhere");
// select the checked checkboxes
var checked = $("tr input:checkbox:checked");
// set the checked checkboxes' parent tr elements' background-color
// according to how many there are
checked.closest("tr").css("background-color",
                          checked.length===1 ? "yellow" : "blue");

Notice that you don't need to select by the name attribute at all, because jQuery's .closest() method will let you find the tr elements that the checked checkboxes belong to.

WORKING DEMO: http://jsfiddle.net/FB9yA/