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

Question

我想计算总价的总和。我创建了一个 sumTransaction() 函数。该表是动态的。然后该值显示到 area_total。但如何对总价格指数列中的 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;
}

Answer 1

现在，您尝试对表中的所有整数(而不仅仅是整数，这会导致 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;
}

顺便说一句，这个循环可以使用Array.prototype.reduce来简化:

var total = [].reduce.call(td, function(a, b) {
    return a + parseInt(b.innerText);
}, 0);

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