Mehrere Funktionen für EventListener Callback

-1

Ich habe diese HTML-Tabelle und span. Ich versuche es so zu machen, dass in jeder Zeile value1 und value2 addiert und in der Summenzelle in derselben Zeile angezeigt werden. Außerdem wird jeder Wert für Wert1, Wert2 und Summe in Zeile 1 und Zeile 2 zusammenaddiert und im Bereich für diese bestimmte Spalte angezeigt.Mehrere Funktionen für EventListener Callback

Ich weiß für die Zeilen wäre es einfach, aber kann ich mehrere Funktionen für die JavaScript-Ereignis-Listener auf ein einzelnes Element haben, würde man die Berechnung für die Spalte und die andere würde die Berechnung für Zeilen tun. Oder soll ich eine Bibliothek verwenden (zB. 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/

Quelle

2016-05-31 Andrew Bailey

Sie können beliebig viele Ereignisse zu jedem Element hinzufügen. – zzzzBov

Aufruf 2 Funktionen (mit Berechnungen und ui Update) von dem Ereignis-Listener Rückruf
Arbeiten mit n-Nummer von Reihen

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

mehr Ereignis-Listener zu dem Elemente hinzugefügt werden kann (mit Jquery)

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

Quelle

2016-05-31 16:15:50 bfmags

ist sumRows (this); Senden Sie die ganze Tabelle oder die bestimmte Zeile? –

wärst du in der Lage, mich in diesem JSFIDDLE zu zeigen? –

Wäre es wahrscheinlich eine bessere Idee für mich, die ID der tatsächlichen Eingabe anstelle der td zuzuweisen? Ich lehne mich ja zu. –

Da Siegetaggtauf Ihre Frage, hier ist ein Beispiel für die Macht der Knockout mit tun, was Sie leichter
Beispiel wollen: 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);

Quelle

2016-05-31 18:46:09

Was ist mit n-Zeilen? –

Anzahl der Zeilen ist die Länge des 'ObservableArray'. Außerdem fügte ich dem Beispiel für die dynamische Verwendung eine 'Add New Row'-Schaltfläche hinzu. So können Sie eine neue Zeile hinzufügen und alles ist gebunden. –

Mehrere Funktionen für EventListener Callback

Antwort

Verwandte Themen