Несколько функций для eventListener Callback

-1

У меня есть эта таблица html и span. Я пытаюсь сделать так, чтобы на каждой строке значение1 и значение2 складывались вместе и отображались в ячейке суммы в той же строке. Также, чтобы каждое значение для value1, value2 и Sum как в строке 1, так и в строке 2 складывалось вместе и отображалось в промежутке для этого конкретного столбца.Несколько функций для eventListener Callback

Я знаю, что для строк это было бы легко, но могу ли я иметь несколько функций для прослушивателей событий 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); 
});

несколько слушателей событий могут быть добавлены к элементу (используя JQuery)

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

источник

2016-05-31 16:15:50 bfmags

is 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-ряда строк? –

Число строк - это длина «наблюдаемого массива». Кроме того, я добавил кнопку «Добавить новую строку» в пример для динамического использования, поэтому вы можете добавить новую строку, и все связано. –

Несколько функций для eventListener Callback

ответ

Смежные вопросы