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/

HEre是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函数$()时，即使只有1或0个元素匹配，它也会返回一个类似于数组的jQuery对象。所以你的代码：

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/

如何更改表中行的颜色

3 个答案: