JQuery Ajax : onchange in cart item should change the total value

0
votes

i am creating a shopping cart in php jquery , the cart has dropdown options for weight and quantity , i need a solution that change in these dropdowns should change the total price of the product... I did it but the code changes al the columns , i need to change only the price column. any solutions?

<!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

2
phpjqueryajaxonchangecart
Each column has total value in the bottom row. You want to update value in each bottom cell of each column? – Himanshu Upadhyay

2 Answers

0
votes

you should modify your code, Use children in your script:

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

nth-child(8) = 8 is td column value.

0
votes

Try this 

<!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>