javascript - 复选框 JavaScript 不更新值

Question

我有一个表格，其中包含几行文本框作为输入，其中包含带有 css .hours 的数字/小时。当行被删除时，我正在尝试让表更新总计 checkbox is checked/clicked.

How to Update the totals in the row & col at the End? 当选中删除行复选框时。

2 个步骤:我将已删除行中的值清零，然后要更新新的总计。

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));
    };

---

Answer 1

因为您有很多 ID，所以您可以避免 HoursChangedFunction。

为了获得当前列中的相应单元格，您可以使用 eq method

此外，您可以使用 .text( function )以简化任务。

您可以从以下方面简化事件处理程序:

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

到:

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

因为在处理程序内部，您仅在选中复选框时才执行逻辑。

片段:

$('#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>