eventListener 콜백에 대한 여러 함수

-1

이 html 테이블과 범위가 있습니다. 각 행에 value1과 value2가 함께 추가되어 같은 행의 sum 셀에 표시되도록하려고합니다. 또한 행 1과 행 2의 value1, value2 및 Sum에 대한 각 값이 함께 추가되어 특정 열에 대한 범위에 표시됩니다.eventListener 콜백에 대한 여러 함수

행을 쉽게 알 수 있지만 하나의 요소에서 JavaScript 이벤트 리스너에 대해 여러 함수를 사용할 수 있습니다. 하나는 열 계산이고 다른 하나는 행 계산입니다. 아니면 내가이 라이브러리를 사용한다 (예. knockoutJS) 이벤트 리스너 콜백에서 N-번호

작업 (계산 및 UI 업데이트)이 함수를 호출

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

여러 이벤트 리스너 요소에 추가 할 수 있습니다 (사용 JQuery와)

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

출처

2016-05-31 16:15:50 bfmags

은 sumRows (this)입니다. 전체 테이블이나 특정 행을 보냈습니까? –

JSFIDDLE에서 나를 보여줄 수 있습니까? –

td 대신 실제 입력에 id를 할당하는 것이 더 나은 아이디어일까요? 나는 예쪽으로 기울어 져있다. –

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

당신은 01,237,557,535 태그했기 때문에 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'의 길이입니다. 또한 동적 사용 예제에서'Add New Row' 버튼을 추가 했으므로 새로운 행을 추가하면 모든 것이 바운드됩니다. –

eventListener 콜백에 대한 여러 함수

답변

관련 문제