計算動態表中總計的錯誤

我設計了一個表格，您可以在其中添加動態行，用戶可以爲它們中的每一個選擇數量和價格。我有一系列非常簡單的功能，可以刪除，清空整個表格或計算所有插入產品的總數。到目前爲止，一切正常，當我創建3行，我將它添加到它們的每個值，然後我決定刪除第二行並計算總數。正如你所看到的，計算是有缺陷的，實際上我只返回添加到表中的第一個產品的總數。我不明白爲什麼腳本無法正常工作。任何人都可以幫我解決這個問題嗎？計算動態表中總計的錯誤

<html> 
<table style='width:100%' id='table'> 
    <tr> 
     <td colspan='3'><input type="button" style="background-color:#00FA9A" value="add product" onclick="add()" id="button"><input type="button" style="background-color:red" value="Delete all" onclick="deleteall()" id="button"> 
     </td> 
    </tr> 
    <tr> 
     <td>Quantity</td> 
     <td>€</td> 
     <td>Delete</td> 
    </tr> 
</table> 
<input type="button" id="button" value="Calc total" onclick="total()"><input type="text" class='input' id="total">€ 
</html> 

<script> 

var idx = 0;   
var cont = 0;  
var buttcont = 0; 
var quantity, priece; 


function deleteall() 
{ 
    location.reload(); 
} 


function add() 
{ 

    var tableRef = document.getElementById('table').getElementsByTagName('tbody')[0]; 

    var newRow = tableRef.insertRow(tableRef.rows.length); 
    newRow.id = "row" + cont; 
    cont++; 

    var newCell1 = newRow.insertCell(0); 
    var newCell2 = newRow.insertCell(1); 
    var newCell3 = newRow.insertCell(2); 
    var input1 = document.createElement('input'), 
     input2 = document.createElement('input'); 
     input3 = document.createElement('button'); 

    input1.type = 'number'; 
    input1.style.width = "100%"; 
    input1.id = "priece" + idx; 
    input1.min = 0; 
    input1.value = 1; 

    input2.type = 'text'; 
    input2.min = 1; 
    input2.style.width = "100%"; 
    input2.id = "quantity" + idx; 

    input3.class = 'button'; 
    input3.innerHTML = "Delete"; 

    if(input3.attachEvent) input3. attachEvent('onclick',function(e){deleted(e);}) 
    else if(input3.addEventListener) input3.addEventListener('click',function(e){deleted(e);},false) 

    newCell1.appendChild(input1); 
    newCell2.appendChild(input2); 
    newCell3.appendChild(input3); 

    idx++; 
} 

function deleted(e) 
{ 
    if(document.removeChild && document.getElementById && document.getElementsByTagName) 
    { 
     if(!e) e = window.event; 
     var srg = (e.target)?e.target:e.srcElement; 

     while(srg.tagName != "TR"){srg = (srg.parentNode)?srg.parentNode:srg.parentElement} 

     var tb = document.getElementById('table').getElementsByTagName('TBODY')[0]; 

     tb.removeChild(srg); 
     cont--; 
     idx--; 
    } 
} 

function total() 
{ 
    var total = 0; 

    for(var i = 0; i < idx; i++) 
    { 
     quantity = document.getElementById('quantity' + i).value; 
     priece = document.getElementById('priece' + i).value; 
     total += quantity * priece; 
     document.getElementById('total').value = total; 
    } 
}

來源

2014-07-12 user3344186

的問題來自於一個事實，當你刪除一個表（不是最後一個）內的排你有ID的差距。 getElementById將返回null和您的total函數將引發異常。

添加3個產品：idx是3，DOM中的ids是0,1,2;
移除產品1：idx爲2，DOM中的ids爲0,2; =>總共會拋棄爲i == 1

實際上，您可以通過給輸入分配一個類來避免通過id循環。 Demo。

function total() 
{ 
    var total = 0, 
     prices = document.querySelectorAll('.price'), 
     quantities = document.querySelectorAll('.quantity'), 
     i = 0, len = prices.length; 

    for(; i < len; i++) { 
     total += prices[i].value*quantities[i].value;  
    } 

    document.getElementById('total').value = total; 
}

來源

2014-07-12 15:10:45

非常有用的解決方案。 – user3344186

計算動態表中總計的錯誤

回答

相關問題