在動態創建的DOM中計算值

我已經創建了一個在DOM中動態創建的html表。它有4列，其中兩列有tetboxes，用戶可以輸入數值，然後在最後一列中作爲值減去。 'Delta'='之前的狀態' - '之後的狀態'。我能夠在輸入值時獲得值，但不知道如何獲得其他字段的值來執行計算。在動態創建的DOM中計算值

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。然後 '三角洲' 應該有4

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

來源

2017-07-03 JustMe

你要得到當前行的正值δ ] 對？ –

是的，這是正確的。 – JustMe

而不是id給他們一個共同的類。 –

試試這個：

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/

來源

2017-07-03 23:27:30 taha

使用通用類：

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：

來源

2017-07-03 23:15:27

現在最好的做法是爲CSS樣式保留'class'，你可以使用JavaScript鉤子的數據屬性：http://jsfiddle.net/pq4uref9/12/ –

我做了這一點更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>

輸入：

來源

2017-07-04 00:02:43

在動態創建的DOM中計算值

回答

相關問題