getElementsByName:不工作

Question

我的函数calc()不工作了!！

这里，我想将字段Price和Amount中的数据相乘，并将其放入字段sum中。

当我使用getElementsById时，它适用于第一行，但当我添加新行时，它不适用于新行数据。

请告诉我是否可以使用getElementsByName或getElementsById ?？

function addRow(billingTable) 
{
            var table = document.getElementById(billingTable);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for (var i = 0; i < colCount; i++) 
    {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) 
        {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
        }
    }
}

function deleteRow(billingTable) 
{
    try {
        var table = document.getElementById(billingTable);
        var rowCount = table.rows.length - 1;

        for (var i = 1; i <= rowCount; i++) 
        {

            var row = table.rows[i];

            var chkbox = row.cells[0].children[0];
            if (null != chkbox && true == chkbox.checked) 
            {
                if (rowCount <= 1) 
                {
                    alert("Alle zeilen kann nicht gelöscht werden.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
    } catch(e) 
    {
        alert(e);
    }
}
function calc()
{

    var amount = document.c("Amount")[0];
    alert(amount);
    var price = document.getElementsByName("Price");
    document.getElementsByName('Sum') . value = amount*price;

}



<table border="1" id="billingTable">
            <tr>
                <th></th>
                <th>Position</th>
                <th>Amount</th>
                <th>Price</th>
                <th>Sum</th>
            </tr>
            <tr>
                <td>
                <INPUT type="checkbox" name="chk"/>
                </td>
                <td>
                <input type="text" name="Position" style="width: 140px"/>
                </td>
                <td>
                <input type="text" id="Amount_1" name="Amount" style="width: 140px"/>
                </td>
                <td>
                <input type="text" id="Price_1" name="Price" style="width: 139px" onchange="calc()"/>
                </td>
                <td>
                <input type="text" id="Sum_1" name="Sum" style="width: 139px"/>
                </td>
            </tr>


        </table>

Answer 1

方法getElementsByName返回一个节点列表，该列表可以像数组一样使用。您需要做的就是抓取它们并循环它们，以便对所有行进行计算。

function calc()
{
    var amounts = document.getElementsByName("Amount");
    var prices = document.getElementsByName("Price");
    var sums = document.getElementsByName('Sum');

    for(var i=0; i<amounts.length; i++)
    {
        sums[i].value = amounts[i].value * prices[i].value;
    }
}

Answer 2

试一下，

变化

var price = document.getElementsByName("Price");
document.getElementsByName('Sum') . value = amount*price;

至

var price = document.getElementsByName("Price")[0]. value;
document.getElementsByName('Sum')[0]. value = amount*price;