Javascript 如何对列动态表中的值求和

我想把总价加起来。我创建了一个

sumTransaction（）

函数。这张桌子是动态的。然后该值显示为

总面积

。但是如何从总价格指数列中求出

td

值的和呢

html代码

<div class="container">

    <div class="form" style="margin-top: 50px;">

        <div class="form">
            <div class="form-group">
                <label for="inputEmail3">Input</label>
                <div class="">
                    <input type="text" class="form-control" id="transaction" placeholder="Input Transaction">
                </div>
            </div>
            <div class="form-group">
                <div>
                    <button type="submit" class="btn btn-default" onclick="addTransaction()">Add</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <table id="table_trans" class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Amount</th>
                    <th>Total Price</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">
                        <input type="button" value="Total Price" class="btn btn-success" id="sumTransaction()" />
                    </td>
                    <td id="area_total"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<!-- /.container -->

输入
添加
名称
价格
数量
总价

脚本代码

function addRow(tags) {
    tags = tags.split(',');
    var total = tags[1] * tags[2];
    tags.push(total);
    var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
    var newRow = theTable.insertRow(-1);
    var newCell, theText, i;
    for (i = 0; i < tags.length; i++) {
        newCell = newRow.insertCell(i);

        theText = document.createTextNode(tags[i]);
        newCell.appendChild(theText);
    }
}

function addTransaction() {
    var inputTags = document.getElementById('transaction').value;
    addRow(inputTags);
}

function sumTransaction() {
    var td = document.getElementById('table_trans').getElementsByTagName('td');
    var total = 0;

    for (var i in td) {
        if (td[i])
            total += parseInt(td[i].innerHTML);
    }
    document.getElementById('area_total').innerHTML = total;
}

函数addRow（标记）{
tags=tags.split（'，'）；
var总计=标签[1]*标签[2]；
标签。推送（总计）；
var theTable=document.getElementById（'table_trans'）.getElementsByTagName（'tbody'）[0]；
var newRow=表格.insertRow（-1）；
var newCell，theText，i；
对于（i=0；i

现在，尝试将表中的所有整数（而不仅仅是整数，这将导致

NaN

）相加

可以使用以下选择器选择表体的最后所有列：

function sumTransaction()
{
    var td = document.querySelectorAll('#table_trans > tbody > tr > td:last-child');
    var total = 0;

    for (var i = 0; i < td.length; i++)
    {
        total += parseInt(td[i].innerText);
    }

    document.getElementById('area_total').innerText = total;
}

这是工作表。演示将立即运行计算，无需单击按钮。

在此示例中

在

addRow（）

函数中，我将其改为这样，以便在最后一个

td

中添加一个类

total price

，以便以后轻松获取它们-如果需要，您可以在

sumtransation（）函数中单独设置总价样式

for (i = 0; i < tags.length; i++) {
    newCell = newRow.insertCell(i);
    if (i == 3) {
        var lastCell = theTable.lastElementChild.lastElementChild;
        lastCell.className = "total-price";
    }

    theText = document.createTextNode(tags[i]);
    newCell.appendChild(theText);
}

function sumTransaction() {
    var totalPrice = document.getElementsByClassName("total-price");
    var i, priceText, grandTotal = 0;
    for (i = 0; i < totalPrice.length; i++) {
        priceText = parseFloat(totalPrice[i].innerHTML);
        grandTotal += priceText;
    }
    alert(grandTotal);
}


函数addRow（标记）{
tags=tags.split（'，'）；
var总计=标签[1]*标签[2]；
标签。推送（总计）；
var theTable=document.getElementById（'table_trans'）.getElementsByTagName（'tbody'）[0]；
var newRow=表格.insertRow（-1）；
var newCell，theText，i；
对于（i=0；i


输入
添加
名称
价格
数量
总价
你能在上面创建实时工作演示吗？我认为最好使用
parseFloat（）
而不是
parseInt（）
，以防总价有分数。我想知道如何在表上的最后一列中添加一个类。因为我找到的教程总是在
td
表上有一个类。谢谢你的回答：非常欢迎，我很抱歉，我不知道你在第一个问题中也需要这个功能。当我看到第二个问题时，我感到内疚
function sumTransaction() {
    var totalPrice = document.getElementsByClassName("total-price");
    var i, priceText, grandTotal = 0;
    for (i = 0; i < totalPrice.length; i++) {
        priceText = parseFloat(totalPrice[i].innerHTML);
        grandTotal += priceText;
    }
    alert(grandTotal);
}