動的に作成されたDOMの値を計算する

Question

DOMで動的に作成されたhtmlテーブルを作成しました。それは4つの列を持ち、2つの列にはユーザーが値を入力できるテントボックスがあり、最後の列の値として減算されます。 'デルタ' = '前の状態' - '後の状態'。私はそれが入力されたときに値を得ることができるが、計算を行うために他のフィールドの値を取得する方法がわからない。

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

それは表示するように簡単です。
行の1つに「前の状態」に9を、「後に状態」に5を入力します。 'デルタ' は、その後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/

Answer 2

が共通のクラスを使用している必要があります

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

我々は後に入ると今現在の行のデルタ値を取得州後：

$('.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 3

私はこのもう少しjqueried作りました。私はjQueries onを使用して、動的に追加された要素のイベントを処理しました。

その後、我々は、変更があったと

var deptArray = ["Human Resources", "Accounting and Finance", "IT", "Marketing", "Purchasing Department"]; 
 
var state = ["stateBefore", "stateAfter", "Delta"]; 
 

 
for(var x=0; x<deptArray.length; x++) { 
 
\t var html = "<tr>"; 
 
\t \t html +="<td>"+deptArray[x]+"</td>"; 
 
\t \t for(var y=0; y<state.length; y++) { \t \t \t 
 
\t \t \t if (state[y] === "stateBefore") 
 
\t \t \t { 
 
     //alert(state[0]); 
 
\t \t \t \t html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[0]+"'></td>"; 
 
\t \t \t }else if (state[y] === "stateAfter") { 
 
     //alert(state[1]); 
 
\t \t \t \t html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[1]+"'></td>"; \t \t \t 
 
\t \t \t }else if (state[y] === "Delta") { 
 
     //alert(state[2]); 
 
\t \t \t \t html += "<td><input type='text' id='"+deptArray[x]+state[2]+"'></td>"; \t \t \t 
 
\t \t \t } \t \t \t 
 
\t \t } 
 
     html += "</tr>"; 
 
     //document.getElementById("#deptState").appendChild(html); 
 
     $("#deptState").append(html); 
 
    } 
 
    
 

 
    
 
    $("#deptState").on("change", "input[type='text']", function(){ 
 
    \t \t 
 
     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) 
 
     { 
 
     \t alert("Value: "+$(this).val()); \t 
 
     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"> 
 
\t \t <tr> 
 
\t \t \t <th>Department</th> 
 
\t \t \t <th>State Before</th> 
 
\t \t \t <th>State After</th> 
 
\t \t \t <th>Delta</th> \t \t \t 
 
\t \t </tr> 
 
\t </table>

私たちの操作を実行している行からすべての入力をつかむ：