使用jQuery对HTML中的另一个单元格求和，并在另一个单元格中显示结果

9wbgstp7 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(204)

我想从同一行的另一个单元格中汇总表中的焦点单元格，并将结果粘贴到该行的总列中。
下面是我的代码。
alert（$（this）.find（'#table tr td input#quantity'）.瓦尔（））;
但它不工作，因为给我未定义/南错误警报。

jquery

来源：https://stackoverflow.com/questions/76431335/sum-the-cell-from-another-cell-in-html-using-jquery-and-show-result-in-another-c

2条答案

按热度按时间

dfuffjeb1#

我建议使用CSS类而不是ID，这将允许您计算单独的行并具有任何数量的行。还提供了总和的示例。

$('#table').on('input', 'input:not(.sum, .total)', e => {

  const $table = $(e.originalEvent.currentTarget);
  const $row = $(e.target).closest('tr');
  
  const calcSum = (elem, from) => {
    const sum = [...from].reduce((sum, elem) => {
      const val = parseFloat(elem.value);
      return sum + (val === val ? val : 0);
    }, 0) || NaN;
    elem.val(sum === sum ? sum : '');
  };
  
  // calc sum of the row
  calcSum($row.find('.sum'), $row.find(':not(.sum)'));
 
  // calc total
  calcSum($table.find('.total'), $table.find('.sum'));
 
});

input{
  max-width:100px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input readonly class="sum" placeholder="Sum"></td>
  </tr>
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input readonly class="sum" placeholder="Sum"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input readonly class="total" placeholder="Total"></td>
  </tr>  
</table>

赞(0）回复(0）举报 2023-06-22

2q5ifsrm2#

<!DOCTYPE html>
<html>
<body>

<!DOCTYPE html>
<html>
<head>
  <title> Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="table">
    <thead>
      <tr>
        <th>Input 1</th>
        <th>Input 2</th>
        <th>Input 3</th>
        <th>Input 4</th>
        <th>Input 5</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="total-input" readonly /></td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>

  <script src="script.js"></script>
</body>
</html>

<script>
$(document).ready(function() {
  // Function to update the total
  function updateTotal(row) {
    var total = 0;
    var inputs = row.find('.input-box');

    // Iterate through each input box in the current row
    inputs.each(function() {
      var value = parseFloat($(this).val());

      // Check if the value is a valid number
      if (!isNaN(value)) {
        total += value;
      }
    });

    // Set the total value in the last input box of the same row
    row.find('.total-input').val(total);
  }

  // Listen for input changes on the input boxes
  $('.input-box').on('input', function() {
    var row = $(this).closest('tr');
    updateTotal(row);
  });
});

</script>

</body>
</html>

赞(0）回复(0）举报 2023-06-22

我来回答

使用jQuery对HTML中的另一个单元格求和，并在另一个单元格中显示结果

2条答案

相关问题

热门标签

最新问答