eventListener 回調的多個函數

Question

我有這個 html 表和跨度。 我試圖讓它在每一行上，value1 和 value2 將相加並顯示在同一行的總和單元格中。 此外，第 1 行和第 2 行中 value1、value2 和 Sum 的每個值都將相加並顯示在該特定列的跨度中。

我知道對於行來說這很容易，但是我可以在單個元素上為 JavaScript 事件偵聽器設置多個函數，一個會為列進行計算，另一個會為行進行計算。 或者我應該使用庫（例如knockoutJS）

<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/

Answer 1

從事件偵聽器回調中調用 2 個函數（帶有計算和 ui 更新）
適用於 n 行

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() {...

Answer 2

由於您已在問題上標記了Knockout ，這里有一個示例，說明如何利用淘汰賽的力量更輕松地做您想做的事
示例： https : //jsfiddle.net/9aLvd3uw/188/
網址：

<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"/>

虛擬機：

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);

eventListener 回調的多個函數

問題描述

2 個解決方案

解決方案1
0 已采納 2016-05-31 16:15:50

解決方案2
0 2016-05-31 18:46:09

eventListener 回調的多個函數

問題描述

2 個解決方案

解決方案1 0 已采納 2016-05-31 16:15:50

解決方案2 0 2016-05-31 18:46:09

解決方案1
0 已采納 2016-05-31 16:15:50

解決方案2
0 2016-05-31 18:46:09