如何使用javascrip/jQuery对表列求和?

问题描述

我有一个简单的表，我想对两个列求和.的，比仅当相关复选框被选中顶部.

I have a simple table and I want to sum two comlumns. On top of than only when a relevant checkbox is checked.

桌子就是这样

<table id="Zinzino" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<th><strong>Název</strong></th>
<th class="sum"><strong>První balíček</strong></th>
<th class="sum"><strong>Měsíčně</strong></th>
<th> </th>
</tr>
<tr>
<td>BalanceOil <input type="checkbox" id="BalanceOil" name="BalanceOil" class="beru"></td>
<td>149 EUR</td>
<td>30 EUR</td>
<td> </td>
</tr>
<tr>
<td>Extend (2x)<input type="checkbox" </td>
<td>44 EUR</td>
<td>22 EUR</td>
<td> </td>
</tr>
<tr>
<td>Zinobiotic (3x)<input type="checkbox" </td>
<td>64 EUR</td>
<td>23 EUR</td>
<td> </td>
</tr>
<tr>
<td><strong>Celkem</strong></td>
<td class="celkem"> </td>
<td class="celkem"> </td>
<td> </td>
</tr>
</tbody>
</table>

如果需要，我可以修改hmtl.我有一个有效的小提琴解决方案，因为我还没有发现任何有效的代码这个.我相信有人可以为我们提供更优雅的东西.甚至correct我的代码.

I can modify the hmtl if needed. I have a working fiddle solution Because I have not found anything working out of the box I coded this one. I am sure that someone could provide us with something more elegant. Or even correct my code.

推荐答案

这应该可以做到.随时询问是否有些细节不了解.

This should do it. Feel free to ask if some detail is not understood.

$("input[type='checkbox']").on('change', function() {
  updateTotals();
});

function updateTotals() {
  
  // loop cells with class 'celkem'
  $('.total').each(function(){
    
    // for each total, get the column
    const column = $(this).index();
    let total = 0;
    
    // loop trough all table rows, except the header and the row of totals
    $(this).closest('table').find('tr:not(:first, :last)').each(function(){
      if($(this).find('input').is(':checked')) {
      
        // if the input is checked, add the numeric part to the total
        const str = $(this).find(`td:eq(${column})`).text().replace(/\D/g, "");
        if(str) {
          total += Number(str);
        }
      }
    });
    
    if(!total) {
      // if the total is zero, clear the cell
      $(this).text("");
    } else {
      // otherwise, print the total for this column in the cell
      $(this).text(total + " EUR");
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="100%">
  <tr>
    <th>Col 1</th>
    <th><strong>Col 2</strong></th>
    <th><strong>Col 3</strong></th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>149 EUR</td>
    <td>30 EUR</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>44 EUR</td>
    <td>22 EUR</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>64 EUR</td>
    <td>23 EUR</td>
  </tr>
  <tr>
    <td><strong>Totals</strong></td>
    <td class="total"> </td>
    <td class="total"> </td>
  </tr>
</table>

这篇关于如何使用javascrip/jQuery对表列求和?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！