Question

我设计了一个表格，您可以在其中添加动态行，用户可以为每个行选择数量和价格。我有一系列非常简单的功能，允许我删除，清空整个表或计算所有插入的产品的总数。

到目前为止一切正常，当我创建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;
    }
}

Answer 1

问题来自这样一个事实：当你删除表格内的一行（而不是最后一行）时，你会有一个缺口。 getElementById将返回null，您的total函数将引发异常。

添加3个产品：idx为3，DOM中的ID为0,1,2;
删除产品1：idx为2，DOM中的ID为0,2; =＆GT;总投掷量为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;
}

在动态表中计算总计的错误

1 个答案: