eventListenerコールバックの複数の関数

-1

私はこのhtmlテーブルとスパンを持っています。私は、各行でvalue1とvalue2が一緒に加算され、同じ行の合計セルに表示されるようにしようとしています。また、行1と行2の両方のvalue1、value2、およびSumの各値が一緒に加算され、その特定の列のスパンに表示されます。eventListenerコールバックの複数の関数

私は行が簡単だと知っていますが、1つの要素のJavaScriptイベントリスナーに対して複数の関数を持つことができます.1つは列の計算を行い、もう1つは行の計算を行います。それとも私は、ライブラリを使用する必要がある（例えば。knockoutJS）イベントリスナーのコールバックからn個と

作品（計算およびUIのアップデートで）2つの関数を呼び出す

<table style="border: 1px solid"> 
    <thead style="border: 1px solid"> 
     <th> 
      Value 1 
     </th> 
     <th> 
      Value 2 
     </th> 
     <th> 
      Sum 
     </th> 
    </thead> 
    <tr> 
     <td id="r1c1"> 
      <input style="width:50px" /> 
     </td> 
     <td id="r1c2"> 
      <input style="width:50px" /> 
     </td> 
     <td id="r1c3"> 
      <span id="r1Sum">0</span> 
     </td> 
    </tr> 
    <tr> 
     <td id="r2c1"> 
      <input style="width:50px"/> 
     </td> 
     <td id="r2c2"> 
      <input style="width:50px"/> 
     </td> 
     <td id="r2c3"> 
      <span id="r2Sum">0</span> 
     </td> 
    </tr> 
</table> 
    Value 1 column total: <span id="val1ColTotal">0</span> 
    &nbsp; 
    Value 2 column total: <span id="val2ColTotal">0</span> 
    &nbsp; 
    Sum column total: <span id="sumColTotal">0</span>

JSFIDDLE https://jsfiddle.net/gauldivic/4002h1wj/2/

出典

2016-05-31 Andrew Bailey

任意の要素に任意の数のイベントを追加できます。 – zzzzBov

行の

https://jsfiddle.net/13e1kzm3/

<td> 
    <input style="width:50px" /> 
    </td> 
    <td> 
    <input style="width:50px" /> 
    </td> 
    <td> 
    <span id="sum">0</span> 
    </td>

function sumRows(){ 
    $('tr').each(function() { 
    var sum = 0; 
    $(this).find('input').each(function() { 
     sum += +parseFloat($(this).val()) || 0; 
    }); 
    $("#sum", this).text(sum); 
    }); 
} 

function sumColumns(){ 
//... 
} 

$("table").bind("keyup", function() { 
    sumRows(this); 
    sumColumns(this); 
});

あなたはをタグ付けしているので、複数のイベントリスナーは、要素（jqueryの使用）

$("table").bind("keydown, keyup", function() {...

出典

2016-05-31 16:15:50 bfmags

はsumRows（this）です。テーブル全体またはその特定の行を送信しますか？ –

あなたはそのJSFIDDLEで私を見せてくれますか？ –

tdの代わりにidを実際の入力に割り当てる方がいいでしょうか？私ははいに向かって傾いています。 –

に添加することができますあなたの質問には、ここにあなたが簡単に
例やりたいノックアウトの力を利用した例である：https://jsfiddle.net/9aLvd3uw/188/
HTML：

<body> 
<table style="border: 1px solid"> 
    <thead style="border: 1px solid"> 
     <th> 
      Value 1 
     </th> 
     <th> 
      Value 2 
     </th> 
     <th> 
      Sum 
     </th> 
    </thead> 
    <tbody data-bind="foreach:TableItems"> 
     <tr> 
     <td data-bind="text:$index()+1"></td> 
     <td > 
      <input style="width:50px" data-bind="textInput:Value1"/> 
     </td> 
     <td > 
      <input style="width:50px" data-bind="textInput:Value2"/> 
     </td> 
     <td > 
      <span id="r1Sum" data-bind="text:RowTotal"></span> 
     </td> 
    </tr> 
    </tbody> 


</table> 
    <div> 
     <span>Number of row(s):</span><span data-bind="text:TableItems().length"></span> 
    </div> 
    <div> 
     <span>Value 1 column total:</span><span data-bind="text:Column1">0</span> 
    </div> 
    <div> 
    <span> Value 2 column total: </span><span data-bind="text:Column2">0</span> 
    </div> 
    <div> 
    <span>Sum column total:</span><span data-bind="text:Column3"></span> 
    </div> 
    <input type="button" value="Add New Row" data-bind="click:AddRow"/>

VM：

var TableItemViewModel = function (data){ 
    var self = this; 
    self.Value1 = ko.observable(data.value1); 
    self.Value2 = ko.observable(data.value2); 
    self.RowTotal = ko.computed(function() { 
    return parseInt(self.Value1()? self.Value1() : 0) + parseInt(self.Value2()?self.Value2() :0); 
    }); 

} 
    function MainViewModel() { 
    //Sample data 
    var obj = [{value1 : 1 , value2 :11 },{value1 : 2 , value2 :22 }]; 

     var self = this; 
     self.TableItems = ko.observableArray([]); 
       self.TableItems($.map(obj, function (item) { 
      return new TableItemViewModel(item); 
      })); 
     self.Column1 = ko.computed(function() { 
      var sum = 0 ; 
      ko.utils.arrayForEach(self.TableItems(), function (item) { 
       sum = sum + parseInt(item.Value1()) ; 
      }); 
      return sum; 
     }); 
      self.Column2 = ko.computed(function() { 
      var sum = 0 ; 
      ko.utils.arrayForEach(self.TableItems(), function (item) { 
       sum = sum + parseInt(item.Value2()) ; 
      }); 
      return sum; 
     }); 
     self.Column3 = ko.computed(function() { 
      var sum = 0 ; 
      ko.utils.arrayForEach(self.TableItems(), function (item) { 
       sum = sum + parseInt(item.RowTotal()) ; 
      }); 
      return sum; 
     }); 
     self.AddRow = function(){ 
      self.TableItems.push(new TableItemViewModel({value1 : 1 , value2 :1 })) 
     } 
    } 

    ko.applyBindings(new MainViewModel);

出典

2016-05-31 18:46:09

何件の行がありますか？ –

行数は 'observableArray'の長さです。また、私は動的な使用のための例に 'Add New Row'ボタンを追加したので、新しい行を追加するとすべてがバインドされます。 –

eventListenerコールバックの複数の関数

答えて

関連する問題