如何从动态表中求和一个值

Question

我想从动态表中总计总价。表格看起来像这样。 数据表来自拆分功能。 单击总价格按钮时如何汇总总价值？

这是html代码。

<script> 
function addRow(tags) <!--input funtion-->
{
var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow = theTable.insertRow(-1);
for(var i=0;i<tags.length;i++)
newRow.insertCell(i).appendChild(document.createTextNode(tags[i]));
}

function addTransaction()
{
addRow(document.getElementById('transaction').value.split(','));
}
</script>

<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" onclick="sumPrice()" class="btn btn-success" />
                        </td>
                        <td id="area_total"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
 <!-- /.container -->

Answer 1

我看到两种方法：

1. 在生成表格时，将值汇总，然后将其输出为总行。

例如：

var totalPrice = 0;

// ...
// Somewhere in the code handle totalPrice value
// ...

function sumPrice() {
    $("#totalPrice").html(totalPrice)
}

1. 如果您不能影响表生成过程，请为每个td添加一些特定类，然后在sumPrice()查询td.class并显示总计。

例如：

function sumPrice() {
    var totalPrice = 0;
    $("td.totalPriceRow").each(
        function(element) {
            totalPrice += parseInt(element.html(), 10);
        }
    );
    $("#totalPrice").html(totalPrice)
}