Question

我这里有一个页面：http://myechef.wpengine.com/menus/italian-menu/有多个表格。每张桌子都有各种各样的菜肴，旁边都有价格（字面意思是菜单）。

我需要做的是为每个表添加价格列，并使用Javascript在下面给出该表（也称为课程）的总数，但我正在努力。

我可以通过为每个表提供一个唯一的ID来做到这一点，但这是一个非常漫长的做事方式，因为这个页面是内容可管理的，因此可能有20个表，或者只有2个。没有办法提前知道。

我确信必须有一种简单的方法来创建一个只是在每个表中加起价格的函数。有没有人有任何想法？

这是我到目前为止所拥有的。在jsfiddle中比实际页面更容易理解：https://jsfiddle.net/hxt3s5uh/

我很确定我必须首先为每个课程做一个.each（function（）），然后在里面，循环遍历表格的每一行以计算出菜肴的价格（这一点适用于我的实例）然后将该表的所有价格加起来，这就是我遇到的问题。它似乎总是在页面上添加所有行。实时页面目前将所有价格相加，然后乘以3，因为有3个表格。

任何帮助都将不胜感激。

var total_value = 0,
    total_average = 0;

function calculate_dish_totals() {


    $('.menu-builder tbody tr').each(function () {

        var $cell = $(this).find('td:first-child'),
            $cell2 = $(this).find('td:nth-child(2)'),
            $row = $cell.closest('tr'),
            price = $cell.data('cost');
        servings = $cell2.data('servings');

        if (!price) {
            price = 0
        }

        if (isNaN(servings) || servings < 1) {
            servings = 1
        }

        //console.log(servings);
        singleprice = price / servings;

        // Display the price for the dish in the last column
        $row.find('.price').html(singleprice.toFixed(2));

        // Add up each price
        total_value += singleprice;

    });

    // divide by total row count to find the average cost
    var $av_cell = $('.course-totals tbody tr.average td:nth-child(2)'),
        average_count = $av_cell.data('count');

    total_average = total_value / average_count;
    console.log(total_value);
    console.log(average_count);

    $('.js-course-total-price').html(total_value.toFixed(2));
    $('.js-course-average-price').html(total_average.toFixed(2));

}

// course-totals is a wrapper for each list of dishes and the totals
$('.course-tables').each(function () {
    calculate_dish_totals()
});

Answer 1

你非常接近解决方案！使用当前的方法，假设您需要使用.each()迭代表，这是正确的。但是，您当前正在迭代选择器返回的结果：

$('.menu-builder tbody tr')

这为您提供了每个<tr>表格中包含的所有.menu-builder元素，因此当您计算总价格和平均价格时，它始终是页面上每道菜肴的总价/平均价格。

您需要先使用$(".menu-builder")选择表格，然后才能使用<tr>遍历每个子.find('tbody tr')元素。这样，您可以将总/平均价格的计算限制为仅包含在当前表格中的菜肴。

对您的代码进行一些细微修改后，calculate_dish_totals()的更改部分将为：

function calculate_dish_totals() {

    $(".menu-builder").each(function(){
        $(this).find('tbody tr').each(function () {

            // [...]

        });

        // [...]

        $(this).next().find('.js-course-total-price').html(total_value.toFixed(2));
        $(this).next().find('.js-course-average-price').html(total_average.toFixed(2));

    });

}

通过此更改，您也无需为每个calculate_dish_totals()调用.course-tables - 这意味着现在可以简单地调用它：

// $('.course-tables').each(function () {
    calculate_dish_totals()
// });

这是一个updated JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

注意：这假设盘子表后面的下一个表格总是相应的总价/平均价格表。如果情况并非如此，请告诉我，我会相应调整答案。

添加行以获得每个表的总计

1 个答案: