javascript - 使用 javascript 对表格列求和

Question

我正在尝试使用 JS 来总结一列已经由 Javascript 生成的值。我是 JS 新手，所以这可能是错误的。无论如何，我尝试过这个:

注意——最终代码位于底部

 $(".js-package").change(function(){
        var parentTable = $(this).parents("table");
        var table_rows = parentTable.rows;
        var height = table_rows.length;
        var total = 0;
        for (var i = 0; i < height; i++) {
            var current_row = table_rows[i];
            total += current_row[5];
        }
        $(parentTable).find(".js-lb-total").html((total).toFixed(2));
 });

这适用于一堆 html，但相关的内容是我已经得到了这一行，其中的内容应该总计:

<td class="js-lb-total">?</td>

再往上:

 <td>
   <%= l.select :units, dropdown, {}, :class => "unit_select js-package" %>
 </td>

重要的是，看似任意的数字 5 指的是我试图求和的列(假设 JS 从 0 开始数组)。

知道我做错了什么/如何解决它吗？我将继续研究打开一个 fiddle ，我可以将其链接到更完整的代码。我将在下面添加该链接。

谢谢!

编辑——下面的行总计脚本

 $(".js-package").change(function(){
        var numOfPackages = parseFloat($(this).val());
        var parentTr = $(this).parents("tr");
        var parentTable = $(this).parents("table");
        var weight = parseFloat($(parentTr).find(".js-weight").attr('data-weight'));
        var price = parseFloat($(parentTr).find(".js-lb-price").attr('data-lb-price'));
        $(parentTr).find(".js-price").html(((numOfPackages * weight * price).toFixed(2)));
        $(parentTr).find(".js-lbs").html((numOfPackages * weight).toFixed(2));
    });

编辑2——基本 fiddle 链接在这里Fiddle 。但出于某种原因，没有一个 JS 在那里工作。 (第一组在我的服务器上运行)。所以它可能不是特别有帮助。

编辑3——要清楚的是，我试图对一个列进行求和，该列的值都是由另一个javascript操作动态生成的。它们不在 html 中。这可能是问题的一部分吗？

最终编辑——经过多次调整和遵循建议，我得到了这个，效果很好(在合计每行之后，合计价格和磅数)。

$(".js-package").change(function(){
        var numOfPackages = parseFloat($(this).val());
        var parentTr = $(this).parents("tr");
        var parentTable = $(this).parents("table");
        var weight = parseFloat($(parentTr).find(".js-weight").attr('data-weight'));
        var price = parseFloat($(parentTr).find(".js-lb-price").attr('data-lb-price'));
        $(parentTr).find(".js-price").html(((numOfPackages * weight * price).toFixed(2)));
        $(parentTr).find(".js-lbs").html((numOfPackages * weight).toFixed(2));

    var table = document.getElementById('sumtable');
    var table_rows = table.rows;
    var height = parseInt(table_rows.length);
    var lb_total = 0;      
    var money_total = 0;
    var cell;   
    for (var i = 1, iLen = height - 1; i < iLen; i++) {
        cell = table_rows[i].cells[5];
        lb_total += Number(cell.textContent);
    }
    for (var j = 1, jLen = height - 1; j < jLen; j++) {
        cell = table_rows[j].cells[6];
        money_total += Number(cell.textContent);
    }

    $(parentTable).find(".js-lb-total").html(lb_total.toFixed(2));
    $(parentTable).find(".js-price-total").html(money_total.toFixed(2));
});

Answer 1

下面的示例可能会帮助您入门。如果页眉和页脚位于不同的表格部分，这将使生活更轻松，我已将它们全部放在一个 tbody 中。

注意事项:

1. 从单元格读取的值将是字符串，因此您需要将它们转换为数字
2. 众所周知，Javascript 不擅长十进制算术，最好进行整数算术并仅在最后转换为十进制以供演示
3. 小心Math.toFixed，它有怪癖，搜索问题

祝你好运。 :-)

<script>
// column is the column with values in it to total (first column is zero)
// Assume values are floats.
function addRows(tableId, column, resultId) {

    var table = document.getElementById(tableId);
    var rows = table.rows;
    var total = 0;
    var cell;

    // Assume first row is headers, adjust as required
    // Assume last row is footer, addjust as required
    for (var i=1, iLen=rows.length - 1; i<iLen; i++) {
        cell = rows[i].cells[column];
        total += Number(cell.textContent || cell.innerText);
    }
    document.getElementById(resultId).innerHTML = total.toFixed(2);
}
</script>

<table id="productTable">
  <tr>
    <th>Item
    <th>value ($)
  <tr>
    <td>foo
    <td>23.33
  <tr>
    <td>bar
    <td>03.04
  <tr>
    <td>Total
    <td id="totalValue">
</table>
<button onclick="addRows('productTable', 1, 'totalValue')">Update total</button>