javascript 如何更改表中行的颜色

qnzebej0  于 2023-02-07  发布在  Java
关注(0)|答案(3)|浏览(194)

我正在用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>
.
.
.
.
.
.
fnx2tebb

fnx2tebb1#

虽然这段代码没有让您了解所有的函数,但它确实完成了行更新。
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)});​
68de4m5k

68de4m5k2#

首先,你得到的是单元格的背景色,而不是行的背景色。你需要移动它。
下面是你的固定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.

snz8szmq

snz8szmq3#

当你用一个选择器字符串调用jQuery函数$()时,它将返回一个类似于数组 * 的jQuery对象,即使只有1个或0个元素匹配 *。

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

不起作用是因为row不是一个带有style属性的DOM元素,它是一个jQuery对象,类似于一个带有许多额外方法的数组。

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/

相关问题