如何更改表格中行的顏色

我正在開發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

如何更改表格中行的顏色

回答

相關問題