tbody中計數tr，具有一定的風格特徵

我試圖計算一個tbody中的td的數目，其中有white background-color。我需要在計數後更新span的文字。類的我span是.attendenceCounttbody中計數tr，具有一定的風格特徵

$(".attendenceCount").closest('tbody')...

HTML

<table> 
    <thead> 
     <tr> 
      <th>Søløve 16:50-17:30 (3017) <span style="color:black;" class="attendenceCounter">tmp</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr style='background-color:white;'> 
      <td>Albert Hvistendahl Fabel</td> 
     </tr> 
     <tr style='background-color:green;'> 
      <td>Albert Hvistendahl Fabel</td> 
     </tr> 
     <tr style='background-color:white;'> 
      <td>Albert Hvistendahl Fabel</td> 
     </tr> 
     <tr style='background-color:green;'> 
      <td>Alma Valbjørn Bratved</td> 
     </tr> 
     <tr style='background-color:white;'> 
      <td>Albert Hvistendahl Fabel</td> 
     </tr> 
    </tbody> 
</table>

這怎麼有可能？

來源

2013-11-27 Niels Sønderbæk

背景顏色是在「bgcolor」中定義的內嵌顏色還是通過CSS定義的？它是「白色」「白色」還是「ffffff」？ –

它被定義爲'White'via CSS –

顯示你的HTML會有所幫助。 –

新的答案現在你已經引用您的HTML：

現在，你已經引用您的HTML，你正在展示它爲：

<tr style='background-color:white;'> 
    <td>Albert Hvistendahl Fabel</td> 
</tr>

如果style屬性將真看起來正是那樣，有一個快捷鍵：

var tds = $(".attendenceCount").closest('tbody').find('tr[style="background-color:white;"] td');

...但是如果您更改style屬性在所有（例如在background-color:和white之間添加一個空格），那麼將停止工作。

主要推薦確實需要更改HTML，以便您可以更輕鬆地查找某些內容，例如類。

原來的答覆：

有沒有捷徑，你必須找到所有的td元素，並通過他們循環檢查，如果他們有一個白色background-color（很可能是通過filter）。要注意的是在element.style.backgroundColor（或$element.css("background-color")可能是十六進制或RGB符號，所以你必須允許該

東西像：

var whiteBackgroundTds = 
    $(".attendenceCount").closest('tbody').find('td').filter(onlyWhiteBG); 

function onlyWhiteBG() { 
    var bgcolor = (this.style.backgroundColor || "").toLowerCase(), 
     m, 
     isWhite = false; 

    if (bgcolor.substring(0, 3) === "rgb") { 
     // Handle rgb or rgba (check this rex, it's off-the-cuff 
     m = /\s*rgb(?:a)?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/; 
     if (m && m[1] === "255" && m[2] === "255" && m[3] === "255") { 
      isWhite = true; 
     } 
    } 
    else switch (bgcolor) { 
     case "white": // Not likely 
     case "#ffffff": 
     case "#fff": 
      isWhite = true; 
    } 
    return false; // Not white 
}

...但是，這幾乎是僞代碼的想法是。只是你指出正確的方向。

注意，這將只匹配td元素專門分配background-color。如果你需要找到該公司透過那些分配樣式，請使用$(this).css("background-color")而不是上面的this.style.backgroundColor。

來源

2013-11-27 21:53:41

+1 - 經過多次基於顏色過濾元素後，它必須是最差的css屬性才能匹配，因爲它可以是hex，rgb，rgba，而且新的瀏覽器在將來甚至可能會使用hsl，所以它是真的當它很容易添加類或其他東西時不值得做。 – adeneo

@ adeneo：HSL - yikes，請告訴我瀏覽器不會開始給我們...... :-) –

他們可能在某個時候，大多數現在支持RGBA，而不是HSL和HSV這個新的好方法以表示RGB值，至少直到出現新的更閃亮的東西。 – adeneo

這是jsfiddle上的example I made。它使用RGB的顏色，因爲我使用鉻，你可能需要改變（參考T.J.Crowder的答案）。

function calc_attendence() { 
    var count = 0, 
     tds = $('tbody td'); 

    $.each(tds, function (index, value) { 
     var color = $(value).css('background-color'); 
     if (color == 'rgb(255, 255, 255)') { //works for me because I'm using chrome 
      count = count + 1 
     } 
    }); 

    return count 
};

來源

2013-11-27 22:02:17 yuvi

這*非常*脆弱。它會在其他使用'rgb'的瀏覽器中破解（因爲有些不包含空格）。 –

沒錯。我只是想傳達一般想法，而我在回答中提到顏色部分是有問題的 – yuvi

tbody中計數tr，具有一定的風格特徵

回答

相關問題