1

入力ボックスの列を含む HTML テーブルがあり、ボックス内の値の合計を自動的に表示したいと考えています (つまり、合計ボタンをクリックせずに、ボックス内の値が変更されると更新されます)。テーブルは速度によって動的に作成されるため、テーブルの行数は異なります。以下は HTML テーブルの例です。容量行の値の合計を表示したいと考えています。どこから始めればよいかよくわかりません。多数の JavaScript コードを試しましたが、何も正しく動作するものはありませんでした。

 <table border = "1" id = "table">
  <TR>
        <TH>Resource</TH> 
        <TH>Vacation</TH>
        <TH>Allocation</TH>
        <TH>Holidays</TH> 
        <TH>Capacity</TH>
        <TH>Remainder</TH>
    </TR>

  #foreach($user in $userList)
  <tr>
  <td>$user.resource</td>

        <td><input type=text name="vacation" size="6" maxlength="10"></td>
        <td><input type=text name="alloc" size="6" maxlength="10"></td>
        <td><input type=text name="holidays" size="6" maxlength="10"></td>
        <td><input type=text name="capacity" size="6" maxlength="10"></td>
        <td><input type=text name="remainder" size="6" maxlength="10"></td>
    </tr>
  #end 
  <tr>
  <td>Total:</td>
  <td></td><td></td><td></td>
  <td class= "capsum"><input type="text" name="captotal" size="6" maxlength="10"></td>
  <td><input type="text" name="remtotal" size="6" maxlength="10"></td>

  </tr>

  </table>

テーブルには複数の行があり、容量列の各入力ボックスは同じ名前を共有します。そのため、Capsum 列の合計が「capsum」入力ボックスに表示され、入力ボックスの値が変更されると自動的に計算され、更新されます。

4

4 に答える 4

1

このようなもの：

$('table#table input[name=capacity]').change(function()
{
 var sum = 0;

 $('table#table input[name=capacity]').each(function()
 {
  sum += parseInt($(this).val());
 });

 $('input[name=captotal]').val(sum);
});

http://jsfiddle.net/H7DSX/10/

于 2012-07-18T14:52:13.817 に答える
0

テーブル レベルで最高のchangeイベントにフックします。次に、すべての値を合計します。

var updatefns = {};
jQuery.each(["vacation", "alloc" ,"holidays", "capacity", "remainder"], function(i, name) {
     // cache all the elements
     var head = $("#table tr:first th:nth-child("+i+")"); // kind of selector
     var inputs = $("#table input[name=\""+name+"\"]");
     updatefns[name] = function() {
         var sum = 0;
         inputs.each(function(){
             sum+=parseInt(this.value) || 0;
         });
         // set new text:
         head.text(name.charAt(0).toUppercase+name.substr(1)+": "+sum);
     };
});
$("#table").change(function(e){
     var t, n;
     if ((t = e.target) && (n = t.name) && n in updatefns)
         updatefns[n]();
});

更新するヘッド セルには、より優れたセレクターを使用し、それぞれの属性を指定して選択することができます。もちろん、新しいテキストの設定方法は自由に変更できます。

于 2012-07-18T15:20:29.743 に答える
-1

jQueryをお持ちの場合は、次を試してください：

<table onchange="reloadSum()"></table>

var reloadSum = function() {
    var sums = $('.toBeSummed'); // this will need to be the class of the things you want to sum
    var sum = 0;
    for (var i = 0; i < sums.length; i++) {
        sum += parseFloat(sums[i].value);// or maybe parseFloat(sums[i].innerHTML)
    }
    $('#capsum').text(sum);
}

jQuery を持っていない場合は、jQuery を入手してからこれを行います。

于 2012-07-18T14:56:36.497 に答える
-1

合計する必要があるフォーム フィールドの onChange JavaScript イベントに対して処理される関数を割り当てる必要があります。

この関数は、各フィールドの値を読み取り、合計を計算して、必要な場所に保存します。

于 2012-07-18T14:52:34.390 に答える