javascript - 在动态创建的 DOM 中计算值

Question

我创建了一个在 DOM 中动态创建的 html 表格。它有 4 列，其中两列将有 tetboxes，用户可以在其中输入值，然后将作为最后一列中的值减去。 '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");
    }
  })

显示更容易。这是 jsfiddle:
在其中一行中，在“之前状态”中输入 9，在“之后状态”中输入 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/