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。该演示立即运行计算，无需单击按钮。

Answer 2

在此CodePen

中

在addRow()函数中，我将其更改为此内容，以便将一个类total-price添加到最后td以便以后轻松获取它们 - 并且您可以设置总价格的样式如果你想 - 单独在sumTransaction()函数：

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);
}

和sumTransaction()函数：

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);
}

＆＃13;

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);
    if (i == 3) {
      var lastCell = theTable.lastElementChild.lastElementChild;
      lastCell.className = "total-price";
    }

    theText = document.createTextNode(tags[i]);
    newCell.appendChild(theText);
  }
}

function addTransaction() {
  var inputTags = document.getElementById('transaction').value;
  addRow(inputTags);
}

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);
}

＆＃13;

<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" onclick="sumTransaction()" />
          </td>
          <td id="area_total"></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

＆＃13;

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

2 个答案: