用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 开始数组）。

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

谢谢！

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

 $(".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。但是，出于某种原因，没有一个 JS 在那里工作。 （第一束在我的服务器上工作）。所以它可能不是特别有用。

EDIT 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

试试这个：

total = parseInt(total)+ parseInt(current_row[5].childNodes[1].value);

如果这不起作用，请尝试获取所需列的单元格：

total =parseInt(total)+ parseInt(current_row[5].cells[try numbers here].childNodes[1].value);

希望我能帮上忙。

Answer 2

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