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

Question

我正在用 html 开发一个表格。每行都有一个与标签 tr 具有相同属性名称的复选框。因此，如果该 raw 是唯一选择的，我想将所选行涂成黄色，否则将所有所选行涂成蓝色。所以我正在开发这个：

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

但是颜色没有改变:(你能告诉我为什么吗？你能帮我吗？

<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

虽然这段代码不能让您完全了解功能，但它确实会更新行。

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

这里是 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

首先，您获得了单元格而不是行的背景颜色。你需要移动它。

这是您的固定 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>

然后这个脚本就可以工作了

$("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");
    }          
  }
});​

更改“td .ws7”选择器以满足您的需要。

Example.

Answer 3

当您使用选择器字符串调用 jQuery 函数 $() 时，它会返回一个类似于数组的 jQuery 对象即使只有 1 或 0 个元素匹配。所以你的代码：

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

不起作用，因为row 不是具有style 属性的DOM 元素，它是一个jQuery 对象，就像一个包含许多额外方法的数组。匹配的单个 DOM 元素可以使用数组样式表示法访问，因此：

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

将更新第一个匹配的 DOM 元素。如果没有任何匹配项，则 row[0] 将是未定义的，您将收到错误消息。 row.length 会告诉你匹配了多少元素。

在您的代码中：

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

您不需要@ 符号来匹配属性名称，因此"input[type=checkbox]:checked" 可以，但"input:checkbox:checked" 更简单。

所以最终达到您的实际要求，这是当单行有一个复选框以将该行的背景设置为黄色，但如果多行已选中复选框以设置所有这些行'背景为蓝色，只需三行代码即可：

// 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");

请注意，您根本不需要通过name 属性进行选择，因为jQuery 的.closest() method 会让您找到选中的复选框所属的tr 元素。

工作演示：http://jsfiddle.net/FB9yA/