チェックボックス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('change', '.deleteRow:checked', function() { 

：に

$('#Maintable').on('click', '.deleteRow', 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>