javascript - 需要帮助 - - 表格的行列总数

Question

找到答案。感兴趣的可以看看。

改变了我完成这个项目的方法。

需要能够将右侧的行计算为“总计”，将列计算为“每日总计”

我已经能够让其中的一些工作正常，但它的计算很麻烦，不可能是正确的。

总计似乎有效，但总和似乎构成了自己的数字？

我认为一个大问题是我安排类(class)的方式？可能和那些人在一起？

这就是我所拥有的。

JS:

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('.date').mask("99/99/9999");
        $('.account').mask("99-9-999999-9999");
        /*calcuating the vertical and horizontal inputs*/
    $('.calc').change(function(){
        var classArray = $(this).attr('class').split(' ');

        //Personal gas expense
        $('.gasamount').sum("change", "#totals4");
        var num = $(this).attr("id").replace(/[A-Za-z$,-]/g, "");
        $('#gasmoney'+num).val(<cfoutput>#mileage#</cfoutput> * $(this).val());
        $('.gasmoney').sum("change", "#totals5");

        //////////////////////

        //Sum of each cell
        $.each(classArray, function(){
            $('.'+this).sum("change", ".ttl"+this);

        });

        //Finding the grandtotal
        var grandTotal = $('.row26').parent().children('td:last').children( 'input');
        var sum = $('.row25').parent().children('td').children('.calc').sum();
        grandTotal.val(Number(sum).toFixed(2));

    });
        /*bottom loop js*/
        $('.date-mask').mask("99/99/9999");
    });
</script>

还有 ColdFusion/HTML:这是最初的问题所在，并已解决。

        <cfloop from="1" to="#ArrayLen(labels)#" index="r">
        <tr>
            <td class="labels"><cfif ArrayIsDefined(labels,r) AND labels[r] NEQ "Open">#labels[r]#</cfif></td>
            <cfloop from="1" to="7" index="i">
            <cfif labels[r] NEQ "Other: Describe">
                <td id="Day#i#" class="row#r# col#i#">
                    <cfif r EQ 1>#Left(DayOfWeekAsString(i),3)#<cfelse><cfif r EQ 2>
                    <input type="text" class="date-mask" /><cfelse>
                    <input type="text" 
                    <cfif labels[r] EQ "Personal Car: Mileage ##"> id="gasamount#i#" <cfelseif labels[r] EQ "Personal Car: Mileage $">id="gasmoney#i#" </cfif><cfif labels[r] EQ "Daily Totals">id="dailytotals#i#"</cfif>
                     class="<cfif labels[r] EQ "Personal Car: Mileage ##">gasamount<cfelse><cfif labels[r] NEQ "Daily Totals">C#i#</cfif></cfif>
                     <cfif labels[r] EQ "Personal Car: Mileage $">gasmoney<cfelse>calc R#r#</cfif>
                     <cfif labels[r] EQ "Daily Totals">ttlC#i#</cfif>
"
                      <cfif labels[r] EQ "Daily Totals" OR labels[r] EQ "Personal Car: Mileage $">readonly="readonly"</cfif>
                       /></cfif>
                       </cfif>
                </td>
            </cfif>                 
            </cfloop>
            <cfif labels[r] NEQ "Other: Describe">
                <td class="totals"><cfif r EQ 1>Total<cfelse><input type="text" id="totals#r#" class="ttlR#r#" readonly="readonly" /></cfif></td>
            </cfif>
        </tr>
        </cfloop>

问题是我在每日总计上有“calc”类，这导致了主要的计算问题。就像添加一行一样简单。如果您尝试过，感谢您的帮助。

Answer 1

我的添加出现在您的 key 处理程序结束之前。

   $('.calc').keyup(function(){
   var classArray = $(this).attr('class').split(' ');

   $.each(classArray, function(){
                $('.'+this).sum("keyup", ".ttl"+this);
                var grandTot = $('.ttl'+this).sum("keyup", ".gTtl");
                grandTot;
        });


   var grandTotal = $('.row25').parent().children('td:last').children( 'input');
   var sum = $('.row25').parent().children( 'td').children('.calc').sum();
   grandTotal.val( sum );
});

更具体地说:

   var grandTotal = $('.row25').parent().children('td:last').children( 'input');
   var sum = $('.row25').parent().children( 'td').children('.calc').sum();
   grandTotal.val( sum );

我在上述解决方案中遇到的主要问题是，我无法隔离实际具有总计的行。我对“row25”类进行了硬编码，以便上下遍历 DOM。如果你能给最后一行(例如总计行)一个类名就更好了。

例子:

<tr class="dailyTotals"> ....</tr>

如果对保存每日总计的 TR 进行上述更改，则总计计算行将更改为:

var grandTotal = $('.dailyTotals').children('td:last').children( 'input');
var sum = $('.dailyTotals').children( 'td').children('.calc').sum();
grandTotal.val( sum );

在我看来，这更优雅，如果您将来向表格中添加更多仍遵守您选择的命名约定的行，它将继续有效。