通过JavaScript计算表内的数量并进行更新

我想做以下工作：

添加带有金额的项目后，编写一个函数，在更新表中项目的任何更改时计算总数量，并在表底部返回新的总数量。这样，总金额将显示在tfoot中

我应该如何修改脚本以实现这些功能？谢谢

     <div id="Sushi" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width:100%">
                <tr>
                    <td>
                        <img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
                        <input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
                        <input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
                        <input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
                <tr>
                    <td rowspan="3">
                        <img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
                        <input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="Drinks" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width:100%">
                <tr>
                    <td>
                        <img src="drink-1.jpg" id="dr1-img" title="Guava juice">
                        <input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="drink-2.jpg" id="dr2-img" title="Lemonade">
                        <input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
                        <input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="Dessert" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width: 100%;">
                <tr>
                    <td>
                        <img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
                        <input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>


    <div style="border:0px;" id="order">
        <center>
            <h2><b>Ordered Items</b></h2>
            14 Mar 2017 15:59
            <br><br>
            Table:4 - No. of Guests 3

            <table class="nth-table" id="orderlist" border="1">
                <thread>
                    <tr>
                        <th>Description</th>
                        <th>Qty</th>
                    </tr>
                </thread>
                <tbody>
                    <tr>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td align="left"><strong>Total</strong></td>
                        <td align="right" id="val"><strong></strong></td>
                    </tr>
                </tfoot>
            </table>
            <br>
            <div class="noPrint">
                <a href="Order.html">undo</a>
            </div>
        </center>
        <br>
    </div>

    <script>
        function registerHandlers() {
            var buttons = document.querySelectorAll('.button');
            [].slice.call(buttons).forEach(function (button) {
                button.addEventListener('click', onClick, false);
            });
        }

        function onClick(event) {
            event.preventDefault();
            var button = event.target;
            var id = button.id;
            var desc = document.getElementById(id + '-img').getAttribute('title');
            var qty = document.getElementById(id + '-qty').value;

            addToTable(desc, qty);
        }

        function addToTable(desc, qty) {
            var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
            var tbody = document.querySelector('#orderlist tbody');
            tbody.innerHTML = tbody.innerHTML + row;
        }

        registerHandlers();
    </script>

订购物品
2017年3月14日15:59



表：4-宾客人数3
描述
数量
总计





函数寄存器句柄（）{
var buttons=document.queryselectoral（'.button'）；
[].slice.call（按钮）.forEach（函数（按钮）{
addEventListener（'click'，onClick，false）；
});
}
函数onClick（事件）{
event.preventDefault（）；
var按钮=event.target；
var id=button.id；
var desc=document.getElementById（id+'-img'）.getAttribute（'title'）；
var qty=document.getElementById（id+'-qty'）。值；
可添加表（描述、数量）；
}
功能添加表（说明，数量）{
变量行=“”+描述+“”+数量+“”；
var tbody=document.querySelector（“#orderlist tbody”）；
tbody.innerHTML=tbody.innerHTML+行；
}
寄存器句柄（）；

添加订单项目时，不要将其直接添加到表中。创建数据对象（对象数组[{item:'itemName'，数量：1，价格：数量*实际价格}]）。如果要添加相同的项，则更新对象中的项计数，并传递对象以生成表并更新表

当用户单击添加按钮时，添加一个变量来存储总计和数量：

以下是工作和更新的代码：

var总计=0；
var lastQnt=0；
函数寄存器句柄（）{
var buttons=document.queryselectoral（'.button'）；
[].slice.call（按钮）.forEach（函数（按钮）{
addEventListener（'click'，onClick，false）；
});
}
函数onClick（事件）{
event.preventDefault（）；
var按钮=event.target；
var id=button.id；
var desc=document.getElementById（id+'-img'）.getAttribute（'title'）；
var qty=document.getElementById（id+'-qty'）。值；
总计+=parseInt（数量）
可添加表（描述、数量）；
}
功能添加表（说明，数量）{
lastQnt=数量；
变量行=“”+描述+“”+数量+“”；
var tbody=document.querySelector（“#orderlist tbody”）；
tbody.innerHTML=tbody.innerHTML+行；
document.getElementById（“val”）.innerHTML=总计；
}
函数deleteLastRow（）{
总计-=最近的Qnt；
document.getElementById（“val”）.innerHTML=总计；
}
寄存器句柄（）

订购物品
2017年3月14日15:59



解开
表：4-宾客人数3
描述
数量
总计





对不起，我不明白你的意思，你能帮我修改一下编码吗@SudhakarReddyMedagam@nerdy检查：
onClick
和
addToTable
函数需要更改，因为您的脚本也适用于我问题的第一部分。第二部分呢？谢谢@PrashantPimpale@nerdy