更新数据表输入字段并自动计算输入更改时的总计

Question

我正在使用数据表从数据库中呈现一些发票。我正在使用handlebars.js将数据输入表中，如下所示

    <table width="100%" class="table table-striped table-bordered table-hover" id="example">
            <thead>
                <tr>
                    <th>Article</th>
                    <th>Description</th>
                    <th>Qté commandée</th>
                    <th>Prix unitaire</th>
                    <th>Taxes</th>
                    <th>Sous-total</th>
                </tr>
            </thead>
            <tbody>
                {{#each facture.facture}}
                <tr class="data">
                    <td><input type="text" name="article" id="article" value="{{article}}"></td>
                    <td><input type="text" name="desc" id="desc" value="{{desc}}"></td>
                    <td><input type="text" name="quantity" id="quantity" value="{{quantity}}"></td>
                    <td><input type="text" name="price" id="price" value="{{price}}"></td>
                    <td><input type="text" name="tax" id="tax" value="{{tax}}"></td>
                    <td><input type="text" name="totalHT" id="totalHT" value="{{total}}" disabled></td>
                </tr>
                {{/each}}
            </tbody>
        </table>

这是我的表格的截图，以清楚地了解我接下来想做什么：

在页脚中我试图将每行的总额和税额相加，这给了我最终的总价格，我遇到了麻烦，特别是在添加新行时。

这是我的代码：

    <script>

    var rowsData = [{
        /*
    article: '',
    desc: '',
    quantity: '',
    price: '',
    tax: '',
    total: ''
    */
    }]



    $(document).ready(function () {
        $('#example').DataTable({
            "bLengthChange": false,
            "searching": false,
            "paging": false,
        });
        fetchTableData()

        $('#example tbody').on('input', 'tr', function () {

            onEdit(rowsData)
        })

    });


    function addEmptyRow(){
        $('#example').DataTable().row.add([
            '<input type="text" name="article" id="article" value="{{article}}"/>',
            '<input type="text" name="desc" id="desc" value="{{desc}}"/>',
            '<input type="text" name="quantity" id="quantity" value="{{quantity}}"/>',
            '<input type="text" name="price" id="price" value="{{price}}"/>',
            '<input type="text" name="tax" id="tax" value="{{tax}}"/>',
            // total
            '<input type="text" name="total" id="total" value="{{total}}"/>',

        ]).draw();
    }

    function fetchTableData() {
            var data = document.querySelectorAll('.data')
            var total = 0
            var tax = 0
            for (var i = 0; i<data.length; i++) {
                var elements = data[i].getElementsByTagName('input')
                //elements[5].value = elements[2].value * elements[3].value


                rowsData.push({
                    article: elements[0].value,
                    desc: elements[1].value,
                    quantity: elements[2].value,
                    price: elements[3].value,
                    tax: elements[4].value,
                    total: elements[5].value
                })
            };
            console.log(rowsData)
            return rowsData
        }


        function onEdit(rows){
            rows.length = 0

        }
</script>