隠しフィールドに基づくJQuery条件付きフォーマット

Question

HTMLテーブルで条件付き書式設定のためにJQueryを使用するための@Stofke（original jsfiddle）のスクリプトがあります。

私はスコアが隠れたフォームフィールド（以下を参照）に基づいているようにこのスクリプトを微調整しようとしていましたが、私が行ったときには、異なる色のスケールではなく、

$(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 
     } 
    } 
}); 
});