计算动态创建的DOM中的值

我创建了一个在DOM中动态创建的html表。 它有4列，其中两列将具有用户可以输入值的tetbox，然后将其作为最后一列中的值减去。 ‘Delta’=’State Before’ – ‘State After’。 我可以在输入时获取值，但不知道如何获取其他字段的值来进行计算。

HTML

 
 
Department
 
State Before
 
State After
 
Delta
 
  

JAVASCRIPT

  var deptArray = ["Human Resources", "Accounting and Finance", "IT", "Marketing", "Purchasing Department"]; var state = ["stateBefore", "stateAfter", "Delta"]; for(var x=0; x<deptArray.length; x++) { var html = ""; html +=""+deptArray[x]+""; for(var y=0; y<state.length; y++) { if (state[y] === "stateBefore") { html += ""; }else if (state[y] === "stateAfter") { html += ""; }else if (state[y] === "Delta") { html += ""; } } html += ""; $("#deptState").append(html); } var allTextBoxes = document.querySelector("#deptState"); console.dir(allTextBoxes); allTextBoxes.addEventListener("change", function( e ){ if (e.target.tagName === 'INPUT'){ alert("Value: "+document.getElementById(e.target.id).value); console.log("Save data to SharePoint list"); } }) 

它更容易展示。 这是jsfiddle：
在其中一行中，在“State Before”中输入9，在“State After”中输入5。 ‘Delta’应该有4

http://jsfiddle.net/isogunro/pq4uref9/

Answer 1

试试这个 ：

 if (e.target.tagName === 'INPUT'){ // start var rowNode = e.target.parentNode.parentNode; var rowInputs = rowNode.getElementsByTagName('input'); var before = rowInputs[0].value || 0; var after = rowInputs[1].value || 0; if(before && after){ rowInputs[2].value = before - after; } // end alert("Value: "+document.getElementById(e.target.id).value); console.log("Save data to SharePoint list"); } 

http://jsfiddle.net/pq4uref9/10/

Answer 2

使用一个共同的类：

  var deptArray = ["Human Resources", "Accounting and Finance", "IT", "Marketing", "Purchasing Department"]; var state = ["stateBefore", "stateAfter", "Delta"]; for(var x=0; x"; for(var y=0; y"; }else if (state[y] === "stateAfter") { html += ""; }else if (state[y] === "Delta") { html += ""; } } html += ""; $("#deptState").append(html); } var allTextBoxes = document.querySelector("#deptState"); console.dir(allTextBoxes); allTextBoxes.addEventListener("change", function( e ){ if (e.target.tagName === 'INPUT'){ alert("Value: "+document.getElementById(e.target.id).value); console.log("Save data to SharePoint list"); } }); 

现在，在State After之后输入时，获取当前行delta值：

 $('.state-after').focusout(function(){ var stateBefore=$(this).closest('tr').find('.state-before').val(); var stateAfter=$(this).closest('tr').find('.state-after').val(); var delta=(stateBefore-stateAfter); $(this).closest('tr').find('.delta').val(delta); console.log(delta); }); 

检查更新的小提琴 ：

Answer 3

我已经把它变得更加精彩了。 我已经使用jQueries来处理动态添加元素的事件。

然后我们从已进行更改的行中获取所有输入并执行操作

 var deptArray = ["Human Resources", "Accounting and Finance", "IT", "Marketing", "Purchasing Department"]; var state = ["stateBefore", "stateAfter", "Delta"]; for(var x=0; x"; for(var y=0; y"; }else if (state[y] === "stateAfter") { //alert(state[1]); html += ""; }else if (state[y] === "Delta") { //alert(state[2]); html += ""; } } html += ""; //document.getElementById("#deptState").appendChild(html); $("#deptState").append(html); } $("#deptState").on("change", "input[type='text']", function(){ var inputs = $(this).closest("tr").find("input[type='text']"); var fldBefore = inputs[0]; var fldAfter = inputs[1]; var fldDelta = inputs[2]; if($(fldBefore).val().length > 0 && $(fldAfter).val().length > 0) { alert("Value: "+$(this).val()); console.log("Save data to SharePoint list"); $(fldDelta).val($(fldBefore).val() - $(fldAfter).val()) ; } }); 

  
 
 
Department
 
State Before
 
State After
 
Delta