Javascript 在动态创建的DOM中计算值

我已经创建了一个在DOM中动态创建的html表。它有4列，其中两列将有用户可以输入值的Tetbox，然后在最后一列中作为值减去。”Delta“=”之前的状态“-”之后的状态“。我可以在输入值时获取该值，但不确定如何获取其他字段的值以进行计算

HTML

    <table id="deptState" border="1">
    <tr>
        <th>Department</th>
        <th>State Before</th>
        <th>State After</th>
        <th>Delta</th>          
    </tr>
</table>

部门
前述
陈述
三角洲

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 = "<tr>";
        html +="<td>"+deptArray[x]+"</td>";
        for(var y=0; y<state.length; y++) {         
            if (state[y] === "stateBefore")
            {
                html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[0]+"'></td>";
            }else if (state[y] === "stateAfter") {
                html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[1]+"'></td>";            
            }else if (state[y] === "Delta") {
                html += "<td><input type='text' id='"+deptArray[x]+state[2]+"'></td>";          
            }           
        }
      html += "</tr>";
      $("#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");
    }
  })

var deptArray=[“人力资源”、“会计和财务”、“IT”、“市场营销”、“采购部门”]；
var state=[“stateBefore”、“stateAfter”、“Delta”]；
对于（var x=0；x使用公共类：

  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 = "<tr>";
    html +="<td>"+deptArray[x]+"</td>";
    for(var y=0; y<state.length; y++) {         
        if (state[y] === "stateBefore")
        {
            html += "<td><input type='text' class='nrm-text state-before' id='"+deptArray[x]+state[0]+"'></td>";
        }else if (state[y] === "stateAfter") {
            html += "<td><input type='text' class='nrm-text state-after' id='"+deptArray[x]+state[1]+"'></td>";            
        }else if (state[y] === "Delta") {
            html += "<td><input type='text' class='delta' id='"+deptArray[x]+state[2]+"'></td>";          
        }           
    }
  html += "</tr>";
  $("#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");
   }
 });

检查更新的：
尝试以下操作：

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

我将这一点做得更简单一些。我曾经处理动态添加元素的事件

然后我们从行中获取所有的输入，这些输入已经发生了变化，并执行我们的操作


var deptArray=[“人力资源”、“会计和财务”、“IT”、“市场营销”、“采购部门”]；
var state=[“stateBefore”、“stateAfter”、“Delta”]；
对于（var x=0；x 0&&$（fldAfter）.val（）.length>0）
{
警报（“值：+$（this.val（））；
log（“将数据保存到SharePoint列表”）；
$（fldDelta.val（$（fldBefore.val（）-$（fldAfter.val（））；
}
});

部门
前述
陈述
三角洲
您想获得当前行[delta]的正确值吗？是的，这是正确的。与其给它们一个普通的类，不如给它们一个类。现在更好的做法是保持
class
用于css样式，您可以使用javascript挂钩的数据属性：
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");
}