Checkbox JavaScript does not update values

Question

I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.

How to Update the totals in the row & col at the End? when the delete row checkbox is checked.

2 steps: I zero out the values in the deleted row, and then want to update the new totals.

JS fiddle with HTML

 // Call this function, When CheckBox with css .deleteRowis clicked
 $('#Maintable').on('click', '.deleteRow', function ()           
    {
        if ($(this).is(":checked")) {                
            var row = $(this).closest('tr').css({ 'color': 'red' });
            var hours = row.find('.hours');             

            $.each(hours, function (index, item) {
                if ($(this).val()) {  // if there is a value
                    $(this).val('0');
                    // Total the rows does not work??
                    HoursChangedFunction($(this));
                }
            });           
        } // :checked ends

  // when the row is deleted from the checkbox, find it and call this function
  // 1) First make all .hours 0, 2) and then redo the totals
  var HoursChangedFunction = function () {
        var columnIndex = $(this).closest('td').index();
        var row = $(this).closest('tr');
        var hours = row.find('.hours');
        var rowTotal = 0;
        $.each(hours, function (index, item) {
            rowTotal += Number($(this).val());
        });
        row.children('td.rowtotal').text(rowTotal.toFixed(2));
        var columnTotal = 0;
        var grandTotal = 0;
        var rows = $('#Maintable tr');
        $.each(rows, function (index, item) {
            columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
            grandTotal += Number($(this).children('.rowtotal').text());
        });
        footer.eq(columnIndex).text(columnTotal.toFixed(2));
        total.text(grandTotal.toFixed(2));
    };

@Nicholas footer is the bottom row with the totals for everyday column I will add that in sec — Transformer
– Transformer, Commented Mar 19, 2017 at 21:39
@Nicholas it should be tfoot which is really the table footer — Transformer
– Transformer, Commented Mar 19, 2017 at 21:50

gaetanoM · Accepted Answer · 2017-03-19 21:27:38Z

Because you have a lot of IDs you may avoid HoursChangedFunction.

In order to get the corresponding cell in the current col you can use the eq method

Moreover, you can use .text( function ) to simplify the task.

You can simplify the event handler from:

$('#Maintable').on('click', '.deleteRow', function ()

to:

$('#Maintable').on('change', '.deleteRow:checked', function () {

because inside the handler you execute the logic only when the checkbox is checked.

The snippet:

$('#Maintable').on('change', '.deleteRow:checked', function () {
    var row = $(this).closest('tr').css({'color': 'red'});

    $('#grandtotal').text(function(idx, txt) {
        return (+txt - +row.find('.rowtotal').text()).toFixed(2);
    });
    row.find('.rowtotal').text('0.00');

    row.find('.hours').each( function (index, item) {
        if (item.value != '0.00') {
            $('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
                return (+txt - +item.value).toFixed(2);
            });
            item.value = '0.00';
        }
    });
});

.hours {
  width: 50px;
  box-sizing: border-box;
  border: solid 1px #d9e1e4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <thead>
    <tr>
        <th>Task</th>
        <th>Code</th>
        <th>day1</th>
        <th>day2</th>
        <th>dy3</th>
        <th>day4</th>
        <th>day5</th>
        <th>day6</th>
        <th>day7</th>
        <th>Total</th>
        <th>Del</th>
    </tr>
    </thead>
    <tbody id="Maintable">
    <tr>
        <td>
            <span class="project">Project 1</span>
        </td>
        <td>
            <span class="timecode">code 1A</span>
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="2.50">
        </td>
        <td>
            <input class="hours" type="text" value="4.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td class="rowtotal">6.50</td>

        <td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
    </tr>
    <tr>
        <td>
            <span class="project">Project 2</span>
        </td>
        <td>
            <input type="hidden" name="Records.Index" value="1">
            <span class="timecode">code 2B</span>
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="4.50">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td class="rowtotal">4.50</td>

        <td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
    </tr>
    <tr>
        <td>
            <span class="project">Project 3</span>
        </td>
        <td>
            <span class="timecode">code 2C</span>
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.50">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" ype="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td>
            <input class="hours" type="text" value="0.00">
        </td>
        <td class="rowtotal">0.50</td>

        <td><input class="bs-checkbox  deleteRow" data-val="true" type="checkbox" value="true"></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td></td>
        <td></td>
        <td>0.00</td>
        <td>7.50</td>
        <td>4.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td id="grandtotal">11.50</td>
    </tr>
    </tfoot>
</table>

wow! I did not know I could simplify the checked in the selector, simply awesome!! though, I am having some difficulty following the logic where you zero out the rows and then subtract. Why did I have it as a separate hourschangedFunc - because DeleteRow & UpdateHours to the cell hours need to update totals. So, the totals are very important I have a event .on('change', '.hours', function...) that updates the totals -everytime any cell with .hours is updated . And, thats why I pulled it out to separate function.
This works well, but I want to pull it out into a common function - so that I can call it when the delete or any textbox cell .hours is changed can you please show that too.

Collectives™ on Stack Overflow

Checkbox JavaScript does not update values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related