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没有在那里工作。（第一批在我的服务器上工作）。所以它可能不是特别有用。

编辑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中。

注意事项：

从单元格读取的值将是字符串，因此您需要将它们转换为数字
Javascript在十进制算术方面是出了名的差，更好的做整数运算并在最后只转换为十进制用于演示
小心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>

用javascript对表列求和

2 个答案: