eventListener的多個函數回調

-1

我有這個html表和跨度。我試圖做到這一點，以便在每一行value1和value2將相加在一起，並顯示在同一行中的總和單元格。此外，第1行和第2行中的value1，value2和Sum的每個值都將相加並顯示在該特定列的跨度中。eventListener的多個函數回調

我知道這些行很容易，但是我可以爲單個元素上的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/

來源

2016-05-31 Andrew Bailey

您可以添加儘可能多的事件，只要您想要任何元素。 – zzzzBov

調用2個功能（有計算和UI更新）從事件偵聽器回調
作品用正數行

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

多個事件偵聽器可以被添加到元件

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

來源

2016-05-31 16:15:50 bfmags

是sumRows（this）;發送整個表格還是特定的行？ –

你能在JSFIDDLE中看到我嗎？ –

對我來說，將id分配給實際輸入而不是td可能是一個更好的主意嗎？我傾向於。 –

由於你所標記Knockout關於你的問題，這裏是用基因敲除的力量，做你想做的更容易
實例的例子：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

n行的情況如何？ –

行數是'observableArray'的長度。另外，我在示例中添加了「添加新行」按鈕以供動態使用，因此您可以添加一個新行，並且所有內容都已綁定。 –

eventListener的多個函數回調

回答

相關問題