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-ここで基本的なフィドルリンクフィドル。ただし、何らかの理由で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

以下の例で始めることができます。ヘッダーとフッターが別のテーブルセクションにある場合は、作業が楽になります。すべてを1つのボディにまとめました。

注意事項：

  1. セルから読み取られる値は文字列になるため、数値に変換する必要があります
  2. Javascriptは、10進数の算術演算が苦手なことで有名です。整数演算を実行し、プレゼンテーションの最後でのみ10進数に変換する方がはるかに優れています。
  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 に答える