1

ここで前の質問を参照してください: jQuery の列の合計

アイメンのソリューションを使用しましたが、必要に応じて編集しました。jsfiddle で見られるように、私のコードは以下のように動作しなくなりました: http://jsfiddle.net/unKDk/15/

<table id="sum_table" width="300" border="1">
    <tr class="titlerow">
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
        <td>Strawberry</td>
        <td>Total By Row</td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">2</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">2</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">5</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
</table>

Jquery部分は

var totals=[0,0,0,0,0];
$(document).ready(function(){

    var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

    $dataRows.each(function() {
        $(this).find('.rowAA').each(function(i){        
            totals[i]+=parseInt( $(this).html());
        });

        $(this).find('.rowBB').each(function(i){        
            totals[i]+=parseInt( $(this).html());
        });        
    });
    $("#sum_table td.totalCol").each(function(i){  
        $(this).html("total:"+totals[i]);
    });

});
  1. jquery が間違って計算する原因となった問題を解決する方法。
  2. 行ごとの合計を計算する方法
  3. クラス名がまったく同じである必要があります。
4

2 に答える 2

3

あなたが何を望んでいるのかよくわかりませんが、すべての行を列ごとに合計したい場合は、以下を参照してください..

var totalsByRow = [0, 0, 0, 0, 0];
var totalsByCol = [0, 0, 0, 0, 0];
$(document).ready(function() {

    var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

    $dataRows.each(function(i) {
        $(this).find('td:not(.totalRow)').each(function(j) {
            totalsByCol[j] += parseInt($(this).html());
            totalsByRow[i] += parseInt($(this).html());
        });
    });

    for (var i = 0; i < totalsByCol.length - 1; i++) {
        totalsByCol[totalsByCol.length - 1] += totalsByCol[i];       
    }    

    $("#sum_table td.totalCol").each(function(i) {
        $(this).html("total:" + totalsByCol[i]);
    });

    $("#sum_table td.totalRow").each(function(i) {
        $(this).html("total:" + totalsByRow[i]);
    });
});

デモ

于 2012-05-29T17:43:05.377 に答える
1

基本的tdに、中央の行にあるすべての要素をターゲットにする必要があります。new を巡回するたびtdに、その値をその行の最後の td (行の最後tdでない限り) と、tdそのインデックスを共有する最後の行の の両方に追加する必要があります。

$("#sum_table tr:not(:first,:last)").each(function(c,row) {
  $("td",row).text(function(i,t) {
    var n = parseInt( t, 10 ) || 0;
    $(this).nextAll(":last-child").text(function(a,o) {
      return n + ( parseInt( o, 10 ) || 0 );
    });
    $(row).nextAll("tr:last").find("td:nth-child("+(++i)+")").text(function(a,o){
      return "Total: " + ( n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 ) );
    });
  });
});

これは、x 列または y 行に制限されることなく、任意のサイズのテーブルで機能するはずです。

フィドル: http://jsfiddle.net/unKDk/34/

解説付き

各行で何が起こっているのかを理解するのに役立つので、以下の例のコメントを読むことをお勧めします。

// For each table row that is not first or last
$("#sum_table tr:not(:first,:last)").each(function(c,row) {
  // For each td within this row
  $("td",row).text(function(i,t) {
    // Determine numerical value of this td's content
    var n = parseInt( t, 10 ) || 0;
    // Find last td in this row, change its text
    $(this).nextAll(":last-child").text(function(a,o) {
      // Increment its value with the value of current TD
      return n + ( parseInt( o, 10 ) || 0 );
    });
    // Find last row, and td within of same index as current td, change its text
    $(row).nextAll("tr:last").find("td:nth-child("+(++i)+")").text(function(a,o){
      // Increment its value (removing non-numbers) with the value of current td
      return "Total: " + ( n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 ) );
    });
  // End our td loop
  });
// End our tr loop
});
于 2012-05-29T18:42:37.580 に答える