jQuery:计算表中部分的列总计

Question

我有下表:

<table class="stripeMe" cellpadding="0" cellspacing="0" width="100%">
<tbody>
    <tr>
        <th>
            MEALS
        </th>
        <th style="text-align: center;">
            02/6
        </th>
        <th style="text-align: center;">
            02/7
        </th>
        <th style="text-align: center;">
            02/8
        </th>
        <th style="text-align: center;">
            02/9
        </th>
        <th style="text-align: center;">
            02/10
        </th>
        <th style="text-align: center;">
            02/11
        </th>
        <th style="text-align: center;">
            02/12
        </th>
        <th style="text-align: center;">
            Total
        </th>
    </tr>
    <tr>
        <td>
            CONGREGATE - HEALTHY BALANCE
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/6/2011"
            name="116|2/6/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/7/2011"
            name="116|2/7/2011" value="18" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/8/2011"
            name="116|2/8/2011" value="33" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/9/2011"
            name="116|2/9/2011" value="20" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/10/2011"
            name="116|2/10/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/11/2011"
            name="116|2/11/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="116|2/12/2011"
            name="116|2/12/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" readonly="readonly" size="3" class="total"
            id="116|Total" name="116|Total" value="71" />
        </td>
    </tr>
    <tr style="background: #79a2cb;">
        <td>
            <strong>Totals</strong>
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/6/2011"
            name="MEALS|2/6/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/7/2011"
            name="MEALS|2/7/2011" value="18" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/8/2011"
            name="MEALS|2/8/2011" value="33" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/9/2011"
            name="MEALS|2/9/2011" value="20" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/10/2011"
            name="MEALS|2/10/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/11/2011"
            name="MEALS|2/11/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="MEALS|2/12/2011"
            name="MEALS|2/12/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" readonly="readonly" size="3" class="total"
            id="MEALS|Total" name="MEALS|Total" value="71" />
        </td>
    </tr>
    <tr>
        <th>
            BEVERAGES
        </th>
        <th style="text-align: center;">
            02/6
        </th>
        <th style="text-align: center;">
            02/7
        </th>
        <th style="text-align: center;">
            02/8
        </th>
        <th style="text-align: center;">
            02/9
        </th>
        <th style="text-align: center;">
            02/10
        </th>
        <th style="text-align: center;">
            02/11
        </th>
        <th style="text-align: center;">
            02/12
        </th>
        <th style="text-align: center;">
            Total
        </th>
    </tr>
    <tr>
        <td>
            SKIM MILK
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/6/2011"
            name="67|2/6/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/7/2011"
            name="67|2/7/2011" value="4" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/8/2011"
            name="67|2/8/2011" value="10" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/9/2011"
            name="67|2/9/2011" value="5" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/10/2011"
            name="67|2/10/2011" value="10" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/11/2011"
            name="67|2/11/2011" value="4" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="sum" id="67|2/12/2011"
            name="67|2/12/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" readonly="readonly" size="3" class="total"
            id="67|Total" name="67|Total" value="33" />
        </td>
    </tr>

    <tr style="background: #79a2cb;">
        <td>
            <strong>Totals</strong>
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/6/2011"
            name="BEVERAGES|2/6/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/7/2011"
            name="BEVERAGES|2/7/2011" value="4" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/8/2011"
            name="BEVERAGES|2/8/2011" value="10" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/9/2011"
            name="BEVERAGES|2/9/2011" value="5" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/10/2011"
            name="BEVERAGES|2/10/2011" value="10" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/11/2011"
            name="BEVERAGES|2/11/2011" value="4" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" size="3" class="totalCategory" id="BEVERAGES|2/12/2011"
            name="BEVERAGES|2/12/2011" value="0" />
        </td>
        <td style="text-align: center;">
            <input type="text" style="text-align: center;" readonly="readonly" size="3" class="total"
            id="BEVERAGES|Total" name="BEVERAGES|Total" value="33" />
        </td>
    </tr>

</tbody>

我希望能够对每一列求和并将值插入到文本框中。我使用以下 jQuery 让它在行级别上工作总计:

$('input.sum').change(function () {
            var sum = 0;
            $(this).closest('tr').find('input.sum').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                sum += val;
            });
            $(this).closest('tr').find('input.total').val(sum);
        });

列文本框总计的每个类都有一个名称totalCategory。

任何关于如何计算列总数的帮助将不胜感激。

========编辑==============================

好的。我正在通过下面的帮助来解决这个问题。我已将 JavaScript 更改为以下内容:

$('input.sum').change(function () {
            var sum = 0;
            $(this).closest('tr').find('input.sum').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                sum += val;
            });
            $(this).closest('tr').find('input.total').val(sum);

            var tableID = $(this).closest('tr').parents('table').attr('id');
            var columnIndex = $(this).closest('td').attr("cellIndex");
            sumOfColumns(tableID, columnIndex, true);

        });

我还添加了一个新功能:

 function sumOfColumns(tableID, columnIndex, hasHeader) {
        var tot = 0;
        $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : ""))
          .children("td:nth-child(" + columnIndex + ") input.sum")
          .each(function () {
              tot += parseInt($(this).val());
          });
          alert(tot);
    }

现在的问题是我没有从函数 sumOfColumns 中获得正确的值。我是否遗漏了代码中的某些内容？

感谢迄今为止的帮助。

======解决方案==========

这是我想出的解决方案:

 function sumOfColumns(tableID, columnIndex, hasHeader) {
        var tot = 0;
        $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : ""))
          .children("td:nth-child(" + (columnIndex + 1) + ")").find('input.sum')
          .each(function () {
              var val = parseInt($(this).val(), 10);
              if (isNaN(val) || val === undefined) {
                  val = 0;
                  $(this).val(0);
              }
              tot += parseInt(val);
          });

          $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : "")).children("td:nth-child(" + (columnIndex + 1) + ")").find('input.totalCategory').val(tot);
    }


    $(document).ready(function () {
        $('input.sum').change(function () {
            //Initialize variable to hold the totals
            var sum = 0;
            var grandTotal = 0;

            //Sum the row numbers
            $(this).closest('tr').find('input.sum').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                sum += val;
            });

            //Assign the row total to the textbox
            $(this).closest('tr').find('input.total').val(sum);

            //Calculate column totals
            var tableID = $(this).closest('tr').parents('table').attr('id');
            var columnIndex = $(this).closest('td').attr("cellIndex");
            sumOfColumns(tableID, columnIndex, true);

            //Calculate grand totals for the last row
            $("#" + tableID + " tr:last").find('input.totalCategory').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                grandTotal += val;
            });

            $("#" + tableID + " tr:last").find('input.grandTotal').val(grandTotal);



        });
    });

感谢您的帮助!

Answer 1

这是我的解决方案。虽然不漂亮，但很有效。

 function sumOfColumns(tableID, columnIndex, hasHeader) {
        var tot = 0;
        $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : ""))
          .children("td:nth-child(" + (columnIndex + 1) + ")").find('input.sum')
          .each(function () {
              var val = parseInt($(this).val(), 10);
              if (isNaN(val) || val === undefined) {
                  val = 0;
                  $(this).val(0);
              }
              tot += parseInt(val);
          });

          $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : "")).children("td:nth-child(" + (columnIndex + 1) + ")").find('input.totalCategory').val(tot);
    }


    $(document).ready(function () {
        $('input.sum').change(function () {
            //Initialize variable to hold the totals
            var sum = 0;
            var grandTotal = 0;

            //Sum the row numbers
            $(this).closest('tr').find('input.sum').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                sum += val;
            });

            //Assign the row total to the textbox
            $(this).closest('tr').find('input.total').val(sum);

            //Calculate column totals
            var tableID = $(this).closest('tr').parents('table').attr('id');
            var columnIndex = $(this).closest('td').attr("cellIndex");
            sumOfColumns(tableID, columnIndex, true);

            //Calculate grand totals for the last row
            $("#" + tableID + " tr:last").find('input.totalCategory').each(function (i) {
                var val = parseInt($(this).val(), 10);
                if (isNaN(val) || val === undefined) {
                    return;
                }
                grandTotal += val;
            });

            $("#" + tableID + " tr:last").find('input.grandTotal').val(grandTotal);



        });
    });