如何更改表格中某一行的颜色 [英] How to change color of a row in a table

问题描述

我正在开发一个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 =＃FF0000class =ws7> 
< input type =checkboxname =<？php echo $ not [$ j] ['name'];？>onchange =analizeCheckBox（）/> 
< / div> 
。
。
。
 。
。
。
  

解决方案

使用选择器字符串调用jQuery函数 $（）时，它将返回一个类似数组的jQuery对象，即使只有1个或0个元素匹配 em>。所以你的代码：

  row = $（'tr [name * =''+ checked.attr（name ）+']'）; 
 row.style.backgro undColor =＃FFFF33; 
  

因为 row 是不是一个带有样式属性的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 b
$ b

因此最后符合您的实际需求，即单行有复选框来设置行的背景为黄色，但如果多行已选中复选框将所有行的背景设置为蓝色，则只需三行代码即可完成此操作：

  //将所有trs重置为默认颜色
 $（tr）.css（background-color，yourdefaultcolorhere）; 
 //选中选中的复选框
 var checked = $（tr input：checkbox：checked）; 
 //设置选中的复选框'parent tr elements'background-color 
 //根据有多少
 checked.closest（tr）。css（background-color ，
 checked.length === 1？yellow：blue）; 
  

请注意，您不需要按名称选择属性，因为jQuery的 .closest（）方法可以让你找到选中的复选框所属的tr元素。

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

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

解决方案

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/

这篇关于如何更改表格中某一行的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！