复选框JavaScript不会更新值

Question

我有一个表格，其中有一行文本框作为输入，用css .hours保存数字/小时。我正在尝试to get the table to update totals删除行时checkbox is checked/clicked。

如何更新最后一行中的总数& col？当删除行复选框被选中。

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>