1

我正在尝试使用 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));
});
4

2 回答 2

4

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

尝试这个：

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

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

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

希望我有所帮助。

于 2012-10-11T06:30:51.180 回答