基於隱藏字段的JQuery條件格式化

Question

我使用@Stofke（original jsfiddle）的腳本來使用JQuery在HTML表格上進行條件格式化。

我一直在試圖調整這個腳本，以便得分是基於一個隱藏的表單域（見下文），但是當我這樣做時，我只顯示一種顏色，而不是比不同的顏色標度。

$(function() { 
    $('tr> td').each(function(index) { 
     var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]]; 
     var score = $('input.sf').val(); 
     for (var i = 0; i < scale.length; i++) { 
      if (score <= scale[i][1]) { 
       $('input.sf').closest('tr').addClass(scale[i][0]); 
      } 
     } 
    }); 
}); 

我相信這是一個新手的錯誤，但如果有人能夠請把錯誤指向我，這將是偉大的。

HTML表結構

<table> 
    <col id="name" /> 
    <col id="score" /> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Score</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Allan, Paul</td> 
      <td><input type="hidden" class="sf" value="5"></td> 
     </tr> 
     <tr> 
      <td>Bartlett, James</td> 
      <td><input type="hidden" class="sf" value="60"></td> 
     </tr> 
     <tr> 
      <td>Callow, Simon</td> 
      <td><input type="hidden" class="sf" value="35"></td> 
     </tr> 
     <tr> 
      <td>Dennis, Mark</td> 
      <td><input type="hidden" class="sf" value="289"></td> 
     </tr> 
     <tr> 
      <td>Ennals, Simon</td> 
      <td><input type="hidden" class="sf" value="1020"></td> 
     </tr> 
     <tr> 
      <td>Finnegan, Seamus</td> 
      <td><input type="hidden" class="sf" value="5648"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

你的問題是與以下行：

var score = $('input.sf').val(); 

那得到的值第一個<input>元素與類「sf」。我假設你每行都有這樣的元素。你需要獲得一個，而不是第一個。

類似以下內容可能有效，但它假定<input>元素是<td>元素的後代。如果這是不正確的，你可能需要改變一下。

var score = $(this).find('input.sf').val(); 

---

這裏有一個jsfiddle有一些其他的變化。

Answer 2

難道這就是你要做的：

$(function() { 
$('tr> td:odd').each(function(index) {//added back the :odd selector 
    var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]]; 
    var score = $(this).html();//referenced this instead of input.sf 
    for (var i = 0; i < scale.length; i++) { 
     if (score <= scale[i][1]) { 
      $(this).closest('tr').addClass(scale[i][0]);//referenced this instead of input.sf 
     } 
    } 
}); 
});