Нуждаюсь в помощи - Общее количество строк и столбцов таблицы

Question

Нашел ответ. Посмотрите, если вам интересно.

Изменил мой подход к завершению этого проекта.

Необходимо иметь возможность вычислять строки в «Всего» с правой стороны, а столбцы в «Ежедневные итоги»

Мне удалось кое-что из этого сделать, но он не в порядке с вычислениями и не может быть прав.

Общая сумма, кажется, работает, но суммы, кажется, составляют свои собственные числа?

Я думаю, что большая проблема в том, как у меня размещены занятия? Может быть с теми?

Это то, что у меня есть.

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

Мое добавление появляется прямо перед закрытием вашего обработчика ключа.

   $('.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 );

Что, на мой взгляд, более элегантно и будет работать, если в будущем вы добавите в свою таблицу больше строк, которые будут придерживаться выбранных вами соглашений об именах.