Question

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

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：
在其中一行中，在“State Before”中输入9，在“State After”中输入5。 'Delta'应该有4个

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

Answer 1

使用公共类：

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

现在，在状态后：

之后输入时，获取当前行的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);
});

检查更新的fiddle：

Answer 2

试试这个：

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

我已经让这个更加被j ..我已经使用jQueries on来处理动态添加元素的事件。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

计算动态创建的DOM

3 个答案: