在html表中使用jquery过滤后列中的合计值总和

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th class="filter-column">列3</th>
      <th>列4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td class="filter-column">数据3</td>
      <td>数据4</td>
    </tr>
    <!-- 其他行 -->
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td></td>
      <td class="total"></td>
      <td></td>
    </tr>
  </tfoot>
</table>

<script>
$(document).ready(function() {
  $('.filter-column').on('input', function() {
    var total = 0;
    var filterValue = $(this).text();
    
    $('.filter-column').each(function() {
      if ($(this).text() === filterValue) {
        var value = parseFloat($(this).text());
        if (!isNaN(value)) {
          total += value;
        }
      }
    });
    
    $('.total').text(total);
  });
});
</script>