使用 jQuery 对表列的值求和答案

【问题标题】：Sum values of a table column using jQuery使用 jQuery 对表列的值求和
【发布时间】：2017-05-01 05:19:25
【问题描述】：

我已经动态创建了一个table。页面加载时有一列是空的，但是当我选择下拉菜单的数量（其他列）和默认价格值（其他列）时，它会填充值。我想使用 jQuery 添加此过程创建的总值并显示总值。

有没有人知道我该怎么做？我尝试了很多，但没有出现任何结果。

我试试这个：

$(document).each("[id^=total]", function(event){
  var num = this.id.slice(5);
  var sum = 0;

     var value = $('#total'+num).text();
     sum += parseFloat(this.value);

     $('#sum').text(sum);
 });

HTML（显示结果的地方）：

<tr>
   <th colspan="6" style="text-align:right">Total:</th>
   <th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>

HTML（id='qua2' 是从 1 到 20 的下拉菜单）：

<tr>
    <td><center><selectclass='choose'id='qua2'></select></center></td>
    <td><center><spanid='yprice2'>101.10</span></center></td>
    <td><center><spanid='total2'></span></center></td>
</tr>

注意：

total 列是在创建表后创建的。我选择下拉列表的值并进行此过程（下拉列表的值 * 价格）。结果显示在列中。

已更新（我使用此脚本，但 id='sum' 中的结果是 NaN）：

$(document).on('change', "[id^=qua]", function(event){
var num = this.id.slice(3);
var sum = 0;
var value = $("#qua"+num).val();
var yprc = $("#yprice"+num).text();
var amount = value * yprc;
amount = amount.toFixed(2);

var $sum = $("#sum");
var $total = $("#total"+num);

    $total.html(amount);

 $("[id^=total]").each(function(){
 sum += parseFloat($(this).text());
 });
 $sum.text(sum);
});

【问题讨论】：

请您发布一些示例 html。
$('#total'+num).val();试过了吗？
是的，但还是一样。
我更新了我的问题！

标签： javascript jquery html datatable

【解决方案1】：

Working fiddle.

我的建议是避免使用 id 并改用类：

calc_total();

$(".choose").on('change', function(){
  var parent = $(this).closest('tr');
  var price  = parseFloat($('.price',parent).text());
  var choose = parseFloat($('.choose',parent).val());

  $('.total',parent).text(choose*price);

  calc_total();
});

function calc_total(){
  var sum = 0;
  $(".total").each(function(){
    sum += parseFloat($(this).text());
  });
  $('#sum').text(sum);
}

希望这会有所帮助。

calc_total();

$(".choose").on('change', function(){
  var parent = $(this).closest('tr');
  var price  = parseFloat($('.price',parent).text());
  var choose = parseFloat($('.choose',parent).val());

  $('.total',parent).text(choose*price);

  calc_total();
});

function calc_total(){
  var sum = 0;
  $(".total").each(function(){
    sum += parseFloat($(this).text());
  });
  $('#sum').text(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>  
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:right">Total:</th>
    <th colspan="2" style="text-align:center"><span id="sum"></span></th>
  </tr>
</table>

【讨论】：

谢谢，但还是没有。看起来很简单，但我无法弄清楚。
我的答案中的那个？
请检查我的建议。
感谢您的回答！问题是结果就像一个字符串。（例如 0150230850）。不像 150+230+850 = 1230。有什么想法吗？

【解决方案2】：

试试这个方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sum Total for Column in jQuery </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('table thead th').each(function (i) {
                calculateColumn(i);
            });
        });
        function calculateColumn(index) {
            var total = 0;
            $('table tr').each(function () {
                var value = parseInt($('td', this).eq(index).text());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('table tfoot td').eq(index).text('Total: ' + total);
        }
    </script>
</head>

<body>
    <table id="sum_table" width="300" border="1">
        <thead>
            <tr>
                <th>ITEM 1</th>
                <th>ITEM 2</th>
                <th>ITEM 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total:</td>
                <td>Total:</td>
                <td>Total:</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

希望对你有帮助。

【讨论】：

如果我想排除一列来查找总和怎么办
伟大的。我如何将它应用于带有 ajax 的多表？即 ''var tables = $('table.display').each(function () { my things });''?