سلام
فرض کنید جدول زیر را داریم


<!DOCTYPE html>

<html lang="en">





<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>

        tr {

            border: 2px solid red;

        }

        

        td {

            border: 1px solid black;

        }

    </style>

</head>





<body>

    <table class="table  table-striped  table-bordered">

        <thead>

            <tr>

                <td>نام</td>

                <td>تعداد</td>

                <td>قیمت</td>

                <td>قیمت کل</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>کالا1</td>

                <td class="count"><input type="number" value="1"></td>

                <td class="price">100</td>

                <td class="sum">100</td>

            </tr>

            <tr>

                <td>کالا2</td>

                <td class="count"><input type="number" value="4"></td>

                <td class="price">200</td>

                <td class="sum">800</td>

            </tr>

            <tr>

                <td>کالا3</td>

                <td class="count"><input type="number" value="3"></td>

                <td class="price">300</td>

                <td class="sum">900</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>SumTotal</td>

                <td class="sumtotla">1800</td>

            </tr>

        </tfoot>

    </table>













    <script src="js/jquery-3.3.1.min.js"></script>

    <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>





</html>

حالا می خواهم
الف)هرگاه تعداد هرکالای (هر tr)تغییر کرد قیمت کل آن هم باتوجه به قیمت کالا تغییر کند
ب)هرگاه عملیات الف تمام شد جمع کل قیمت کل انها باهم جمع شود و در sumtotla نمایش داده شود