如何更改表格中行的颜色

我正在开发html中的表格。每行都有一个与标签tr具有相同属性名称的复选框。所以我想为黄色选择的行选择颜色，如果该原始颜色是唯一的选择，否则颜色选择蓝色的所有行。所以，我开发这个如何更改表格中行的颜色

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> 
. 
. 
. 
. 
. 
.

来源

2012-02-14 JackTurky

你的表格单元格的背景颜色要重写它...行会是你想要的颜色，但它掩盖了细胞的颜色。 – animuson 2012-02-14 19:53:12

为什么不做'$（'tr [name * =''+ checked.attr（'name'）+'“]'）.css（'background-color'，'＃ffff33'）'; – 2012-02-14 19:53:45

我不确定'checked'是否是一个有效的var名称 – ajax333221 2012-02-14 19:53:47

尽管此代码不能让你们自己的方式在funcitonality，但它确实做行更新

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)});

来源

2012-02-14 20:51:40

首先，您已获得单元格背景颜色而非行。你需要移动它。

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

来源

2012-02-14 22:54:39 cdm9002

当调用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/

来源

2012-02-15 00:13:19 nnnnnn

如何更改表格中行的颜色

回答

相关问题