Last row total not updated when change in salary or bonus or deduction

JavaScript
1

in my task below i have only one point.
when i changed in cell of bonus or salary or deduction it can changed in total of row but i cannot change in total of columns when i change in cell of salary or bonus or deduction automatically
to explain
Name salary bonus deduction total

Ahmed 1000 500 500 1000

Ali 2000 400 600 1800

total 3000 900 1100 2800

total=salary + bonus - deduction(for row)
the wrong in when i change in bonus cell for name Ahmed from 500 to 700
total for column bonus not changed it still 900 until i click new row and click button add again value come correctly as following (after change)
Name salary bonus deduction total

Ahmed 1000 700 500 1200

Ali 2000 400 600 1800

total 3000 900 1100 2800

as notice total for column bonus 900 not changed
and total for all columns 2800 not changed
this is my wrong for my code
how to solve that

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    var x = $("#txt1").val();
                    var y = $("#txt2").val();
                    var z = $("#txt3").val();
                    var M = $("#txt4").val();
                    var L = parseInt(y) + parseInt(z) - parseInt(M);

                    $("#tb").append("<tr> <td class='total-ignore'>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
                    var totals = [];
                    $('#tb').find('tr').each(function () {
                        var $row = $(this);

                        $row.children('td').not('.total-ignore').each(function (index) {
                            totals[index] = totals[index] || 0;
                            totals[index] += parseInt($(this).text()) || 0;
                        });
                    })
                    $('#totals td').not('.total-ignore').each(function (index) {
                        $(this).text(totals[index]);
                    });
                    $("#tb tr").each(colorize);
                });
                $("#tb").on("click", "tr", function () {

                    $(this).find("td").slice(0, 4).prop("contenteditable", true);

                     }).on('blur keyup paste input', "tr", colorize)
             
                });

        </script>
        <script>
            function colorize() {
                var numbers = $(this).find("td").slice(1, 4).get().map(function (el) {
                    console.log(arguments)
                    return +$(el).text()
                })
                var total = numbers[0] + numbers[1] - numbers[2]

                var totalEl = $(this).find("td:nth-child(5)").html(total);
                totalEl.removeClass("green yellow red");


                if (total > 1000) {
                    totalEl.addClass("green");
                }
                if (total < 1000) {
                    totalEl.addClass("red");
                }
                if (total == 1000) {
                    totalEl.addClass("yellow");
                }

            }

        </script>
        <style>
            .red {
        background-color: red;
        font-weight: bold;
        color:white;
    }

    .green {
        background-color: green;
    }

    .yellow {
        background-color: yellow;
    }

        </style>
    </head>
    <body>
        <div>
            Name
            <input type="text" id="txt1" />
            <br /> Salary
            <input type="text" id="txt2" />
            <br /> Bonus
            <input type="text" id="txt3" />
            <br /> Deduction
            <input type="text" id="txt4" />
            <br />
            <input type="button" value="add" id="btn" />
            <table>
                <thead>
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            Salary

                        </td>
                        <td>
                            Bonus
                        </td>
                        <td>
                            Deduction
                        </td>
                        <td>
                            total
                        </td>
                    </tr>
                </thead>
                <tbody id="tb" class="tb1"></tbody>
                <tfoot id="totals">
                    <tr>
                        <td class="total-ignore">Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
    </html>
2

Move the totals update out to a separate function, so that you can call it when adding a new row, as well as when editing a cell.

function updateTotals() {
    var totals = [];
    ...
    $("#tb tr").each(colorize);
}

$("#btn").click(function () {
    ...
    updateTotals();
});

...

}).on('blur keyup paste input', "tr", updateTotals)
3

i add the following in code but nothing happen
$(“#tb”).on(“click”, “tr”, function () {

            $(this).find("td").slice(0, 4).prop("contenteditable", true);

        }).on('blur keyup paste input', "tr", updateTotals)

function updateTotals() {
var totals = ;
$(“#tb tr”).each(colorize);
it already work in add button click as my code for first thread
after i add the code you answer for me
it still not update in total of last row
}

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.