JQuery Ajax：购物车项目中的onchange应该改变总值答案

【问题标题】：JQuery Ajax : onchange in cart item should change the total valueJQuery Ajax：购物车项目中的onchange应该改变总值
【发布时间】：2019-08-20 05:06:58
【问题描述】：

我在 php jquery 中创建购物车，购物车有重量和数量的下拉选项，我需要一个解决方案，改变这些下拉菜单应该改变产品的总价格......我做到了，但代码改变了所有列，我只需要更改价格列。有什么解决办法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sum Total for Column in jQuery </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('table thead th').each(function(i) {
                calculateColumn(i);
            });
        });

        function calculateColumn(index) {
            var total = 0;
            $('table tr').each(function() {
                var value = parseInt($('td', this).eq(index).text());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('table tfoot td').eq(index).text('Total: ' + total);
        }
    </script>
</head>
<body>
    <table id="sum_table" width="300" border="1">
        <thead>
            <tr>
                <th>Apple</th>
                <th>Orange</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>Total:</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Total Product

【问题讨论】：

每一列的底行都有总值。您想更新每列的每个底部单元格中的值吗？

标签： php jquery ajax onchange cart

【解决方案1】：

你应该修改你的代码，在你的脚本中使用孩子：

$(this).children('td:nth-child(8)').text(total);

nth-child(8) = 8 是 td 列值。

【讨论】：

【解决方案2】：

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sum Total for Column in jQuery </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var total = [];
            $('table thead th').each(function(i) {
                total.push(calculateColumn(i));
            });
            console.log(total);

            var totalFruits = 0;
            for (var i in total) {
                totalFruits += total[i] ;
            }
            console.log(totalFruits);
            $('#total').text('Total: ' + totalFruits);
        });


        function calculateColumn(index) {
            var count = 0;
            $('table tr').each(function() {
                var value = parseInt($('td', this).eq(index).text());
                if (!isNaN(value)) {
                    count +=value;
                }
            });

            return count;
        }



    </script>
</head>
<body>
    <table id="sum_table" width="300" border="1">
        <thead>
            <tr>
                <th>Apple</th>
                <th>Orange</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" id="total">Total:</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

【讨论】：