计算动态创建的DOM中的值

Question

I have created an html table that is dynamically created in the DOM. It has 4 columns and two of the columns will have tetboxes that a user can enter values into and then will be subtracted as a value in the last column. 'Delta' = 'State Before' - 'State After'. I am able to get the value when it is entered but not sure how to get the value of the other field to do the computation.

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

It's easier to show. Here's the jsfiddle:
In one of the rows, enter 9 in 'State Before' and 5 in 'State After'. 'Delta' should then have 4

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

Answer 1

use a common class:

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

Now get the current rows delta value once we enter after State After :

$('.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);
});

Check the updated fiddle :

Answer 2

try this :

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 3

I've made this a little more jqueried. I've used jQueries on to hande events for dynamically added elements.

Then we grab all the inputs from the row that has had a change and perform our operation

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="deptState" border="1"> <tr> <th>Department</th> <th>State Before</th> <th>State After</th> <th>Delta</th> </tr> </table> 

: