パーセント値

Question

Here's the latest JSFiddleに基づいてCSSクラスを変更します。

HTML：

<table id="math-table"> 
    <tr> 
      <td><input type="text" id="A1" name="A" value=""></td> 
      <td><input type="text" id="B1" name="B" value=""></td> 
      <td><input type="text" id="C1" name="C" readonly="readonly" tabIndex="-1" value=""></td> 
     </tr> 
</table> 

JS：

$("#math-table input").live("keyup", function(){ 
var id = this.id.match(/\d+/); 
$("#C"+id).val(Math.round (($("#A"+id).val()/$("#B"+id).val()) * 100) + "%" ); 

$('#A'+id).attr('value', $('#A'+id).val()); 
$('#B'+id).attr('value', $('#B'+id).val()); 
$('#C'+id).attr('value', $('#C'+id).val()); 
}); 

var uniqueIds = $("#math-table tr").length; 
$("#math-table input[id^='B']").live("change", function(){ 
var $thisRow = $(this).closest("tr"), 
$clone = $thisRow.clone(),    // Clone row 
$inputs = $clone.find("input").val("");// Reset values, return all inputs 
uniqueIds++; //Increment ID 
$inputs[0].id = "A" + uniqueIds; 
$inputs[1].id = "B" + uniqueIds; 
$inputs[2].id = "C" + uniqueIds; 
$thisRow.after($clone);      
}); 

あなたはそのA/B = C％はかなりシンプル見ることができます。特定の％に基づいてCにのみ別のCSSクラスを追加するにはどうすればよいですか？ C値に基づいて、他の場合またはスイッチ声明 - 1から33パーセント

ブルー67から100パーセント

Answer 1

私はあなたのjsFiddleを更新：

http://jsfiddle.net/CzZxf/13/

私は、ルpercentと、このようにそれに基づいて背景色を設定：

if(percent>0 && percent<34) 
    $('#C'+id).addClass("red"); 
if(percent>33 && percent<67) 
    $('#C'+id).addClass("green"); 
if(percent>67) 
    $('#C'+id).addClass("blue"); 

EDIT：私はクローンからクラスを削除するスクリプトを更新しました。これを追加する

$inputs = $clone.find("input").val("").removeClass(); 

Answer 2

それがあれば、簡単なように見える34-66

グリーン％

レッド。 変数の中にCの値を格納し、テストを行います。

addClass（http://api.jquery.com/addClass/）またはremoveClass（http://api.jquery.com/removeClass/）を使用してください。

Answer 3

addClass , removeClass機能を変更してください。以下のように：。

$（ "最初の "）addClass（" 秒 "）//クラスを追加

$（" 最初の。 "）removeClass（" 第二"）//削除します。クラス

ちょうど適用することによって、あなたが望む％に応じて可変と変更クラス内部のC値をとる/他

Answer 4

はそれを最も明白な方法はない場合：

var num = Math.round(($("#A" + id).val()/$("#B" + id).val()) * 100); 
$("#C" + id).val(num + "%"); 
if (num >= 0 && num <= 33) { 
    var cname = "alpha"; 
} else if (num > 33 && num <= 66) { 
    var cname = "beta"; 
} else if (num > 66 && num <= 100) { 
    var cname = "gamma"; 
} 
$('#C').removeClass().addClass(cname); 

0を

http://jsfiddle.net/mblase75/CzZxf/7/

Answer 5

このうち

チェック：http://jsfiddle.net/CzZxf/5/

それはまさにクラスを使用していないが、それはあなたのニーズに合わせてそれをカスタマイズするのに十分なあなたを与える必要があります。

$("#math-table input").live("keyup", function(){ 
    var id = this.id.match(/\d+/); 
    var result = Math.round (($("#A"+id).val()/$("#B"+id).val()) * 100); 
    var result_color = (result >=1 && result < 34) ? 'red' : (result >=34 && result < 67) ? 'green' : 'blue'; 

    $("#C"+id).val(result + "%" ).css('color', result_color); 

    $('#A'+id).attr('value', $('#A'+id).val()); 
    $('#B'+id).attr('value', $('#B'+id).val()); 
    $('#C'+id).attr('value', $('#C'+id).val()); 
}); 

var uniqueIds = $("#math-table tr").length; 
$("#math-table input[id^='B']").live("change", function(){ 
    var $thisRow = $(this).closest("tr"), 
    $clone = $thisRow.clone(),    // Clone row 
    $inputs = $clone.find("input").val("");// Reset values, return all inputs 
    uniqueIds++; //Increment ID 
    $inputs[0].id = "A" + uniqueIds; 
    $inputs[1].id = "B" + uniqueIds; 
    $inputs[2].id = "C" + uniqueIds; 
    //$inputs.eq(0).focus();      
    $thisRow.after($clone);      
});