根據值更改表格單元格的顏色

我正在使用jQuery編輯表格單元格的background-color。我的代碼如下（每個單元具有格式號「X/Y」，所以我挖掘出來的開始）：根據值更改表格單元格的顏色

 $(document).ready(function(){ 
      $("#overview td").click(function(event){ 

       var content = $(this).html(); 
       var vals = content.split("/"); 
       var ratio = vals[0]/vals[1]; 
       alert(ratio); 


       var red; 
       var green; 

       if(vals[1] == 0){ 
        $(this).css('background-color', '#00FF00'); 
       } else{ 
        if(ratio > 0.5){ 
         red = 255; 
         green = parseInt(-2*255*ratio+(2*255)); 
        } else{ 
         green = 255; 
         red = parseInt(2*255*ratio); 
        } 
        var rgbColor = 'rgb(' + red + ',' + green+ ', 0)'; 
        var hexColor = rgb2hex(rgbColor); 
        $(this).css('background-color', hexColor); 
       } 
      }); 
     });

現在這個工作當我點擊每個單獨的小區，但我會喜歡爲$(document).ready()上的所有單元格着色。我認爲.each()方法可能是我正在尋找，但我不知道如何使它正常工作...

任何幫助將不勝感激！

來源

2013-09-24 ms813

您應該能夠簡單地將單詞'click'替換爲單詞'each'，並且可能希望刪除'event'參數。 –

這不起作用，我認爲'這個'是需要得到的值，並告訴它要更改哪個單元？另外，感謝注意'事件'，它是從以前的嘗試剩餘的:) – ms813

我認爲你可能會與'event'對象和'this'對象稍微混淆，'event'對象被傳遞鼠標被點擊時，這個對象是當前的目標對象，在這種情況下，'this'是你當前正在迭代的單元格。 – Nunners

謝謝Nunners，有破壞代碼的標題值。我已經使用以下if區塊修復了它：

if(vals[1] == undefined){ 
    return true; 
} else{ 
    //change colour 
}

來源

2013-09-24 22:03:58 ms813

只需點擊觸發事件：

$(document).ready(function() { 
    $("#overview td").click(function (event) { 
     // ... 
    }) 
    .trigger('click'); 
});

來源

2013-09-24 21:37:46 dfsq

這也返回'比率= NaN'，因爲'this'是需要得到的值我想？ – ms813

這意味着你的一些單元格沒有合適的數據（'content = $（this）.html（）'）。 – dfsq

正如傑森P提到下面的代碼應該很好地工作：

 $(document).ready(function() { 
      $("#overview td").each(function() { 

       var content = $(this).html(); 
       var vals = content.split("/"); 
       var ratio = vals[0]/vals[1]; 
       alert(ratio); 


       var red; 
       var green; 

       if (vals[1] == 0) { 
        $(this).css('background-color', '#00FF00'); 
       } else { 
        if (ratio > 0.5) { 
         red = 255; 
         green = parseInt(-2 * 255 * ratio + (2 * 255)); 
        } else { 
         green = 255; 
         red = parseInt(2 * 255 * ratio); 
        } 
        var rgbColor = 'rgb(' + red + ',' + green + ', 0)'; 
        var hexColor = rgb2hex(rgbColor); 
        $(this).css('background-color', hexColor); 
       } 
      }); 
     });

的。每個方法只是簡單地在檢索到的對象的迭代。

來源

2013-09-24 21:41:25 Nunners

不幸的是，如果我嘗試這種方式，'alert（ratio）;'行會返回NaN，並且顏色不會改變！ – ms813

你能提供你正在嘗試這個表的HTML嗎？如果該值以NaN形式返回，則其中一個值（vals [0]或vals [1]）不是數字。你可以嘗試使用if語句或try catch塊檢查這個並處理錯誤。 – Nunners

謝謝，設法解決它。上面發佈了一個答案 – ms813

根據值更改表格單元格的顏色

回答

相關問題