CODEWITHSUNDEEP
javascriptjqueryhtml
JustMe
JustMe

Reputation: 147

Calculating values in dynamically created DOM

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/

Upvotes: 1

Views: 88

Answers (3)

Jon P
Jon P

Reputation: 19772

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>

:

Upvotes: 1

taha
taha

Reputation: 1017

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/

Upvotes: 1

Sarath Kumar
Sarath Kumar

Reputation: 1146

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:

Upvotes: 1

Related Questions