入力フィールドの動的数の割合を計算する

Question

入力データのうち、入力データの中に含まれる割合を表示する必要があります。

だからユーザ入力3、2、1場合、「パーセント」入力フィールドが表示されるはずです「50、30および20」

事があり、私はフォームが取得されますどのように多くの入力を知りません。 1から任意の数にすることができます。

ソースhtmlコードは、私が作成した部分的なビューによって作成されます。出力は次のとおりです。表中の

<table> 
    <tr> 
     <th>Name</th><th>Distributiob key</th><th>Percent</th> 
    </tr> 

<tr> 
    <td> 
     House 1 
    </td> 
    <td> 
     <input type="text" size="5" value="0" id="LightPhysicalEntities_0__DistributionKey" name="LightPhysicalEntities[0].DistributionKey" /> 
    </td> 
    <td> 
     <input type="text" size="5" id="LightPhysicalEntities_0__Percent" readonly=readonly /> 
    </td> 
</tr> 
<tr> 
    <td> 
     House 2 
    </td> 
    <td> 
     <input type="text" size="5" value="0" id="LightPhysicalEntities_1__DistributionKey" name="LightPhysicalEntities[1].DistributionKey" /> 
    </td> 
    <td> 
     <input type="text" size="5" id="LightPhysicalEntities_1__Percent" readonly=readonly /> 
    </td> 
</tr> 
<tr> 
    <td> 
     House 3 
    </td> 
    <td> 
     <input type="text" size="5" value="0" id="LightPhysicalEntities_2__DistributionKey" name="LightPhysicalEntities[2].DistributionKey" /> 
    </td> 
    <td> 
     <input type="text" size="5" id="LightPhysicalEntities_2__Percent" readonly=readonly /> 
    </td> 
</tr> 

まずフィールドのタイトルや名前です。 2番目は、ユーザーが配信番号でパンチする場所です。 3番目は計算されたパーセンテージを持つ読み取り専用フィールドです。

計算はjavascriptで行う必要がありますが、入力を取得して出力を設定する方法についてはかなり難解です。このような機能は、（これはあなたが異なって処理する場合percentages- Math.floorを置き換える切り捨てます）役立つはず

Answer 1

：

function calcPcts() { 
    var distributions = $("[id$=DistributionKey]"); 

    // Get the base first 
    var base = 0; 
    distributions.each(function() { 
     base += window.parseInt($(this).val(), 10); 
    }); 

    // Now calculate the percentages of the individual ones 
    distributions.each(function() { 
     var input = $(this), 
      val = window.parseInt($(this).val(), 10), 
      pct = (val === 0) ? val : Math.floor((val/base) * 100); 
     $("#" + input.attr("id").replace("DistributionKey", "Percent")).val(pct); 
    }); 
} 

Answer 2

あなたが入力フィールドにクラスを追加する場合は、へのjQueryを使用することができますそのクラスのアイテムの数を取得します。その後、値を取得して計算を実行できます。ここで

は一例です。ここで

var inputCount = $(".inputfield").length; 

$("input[type='text']").change(function() { 
    var total = GetTotal(); 
    for (i = 0; i < inputCount; i++) { 
     var inputValue = $('#LightPhysicalEntities_' + i + '__DistributionKey').val(); 
     if (total != 0) { 
      var percent = inputValue/total; 
      $('#LightPhysicalEntities_' + i + '__Percent').val(percent); 
     } 
    } 
}); 

function GetTotal() { 
    var total = 0; 
    for (i = 0; i < inputCount; i++) { 
     var inputValue = $('#LightPhysicalEntities_' + i + '__DistributionKey').val(); 
     total += parseInt(inputValue); 
    } 
    return total; 
} 

は、スクリプトの動作の一例である：http://jsfiddle.net/ZWuQr/