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

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”選擇器以滿足您的需要。

例子。

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()方法可以讓您找到選中的復選框所屬的 tr 元素。

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