Sum the cell from another cell in html using jquery and show result in another cell

huangapple
go评论87阅读模式
英文:

Sum the cell from another cell in html using jquery and show result in another cell

问题

我想对同一行的另一个单元格中的特定单元格进行求和，并将结果粘贴到该行的总列中。

以下是我的代码。

alert($(this).find('#table tr td input#quantity').val());

但它不起作用，弹出警告时显示未定义/非数字错误。

英文:

I want to sum focused cell in a table from another cell of same row and paste result in a total column of that row.

Below is my code.

> alert($(this).find('#table tr td input#quantity').val());

But its not working as giving me Undefined/Nan Error in alert.

Sum the cell from another cell in html using jquery and show result in another cell

答案1

得分: 2

我建议使用CSS类而不是ID，这样可以计算单独的行并具有任意数量的行。还提供了总和的示例。

  1. input{
  2.   max-width:100px;
  3.   text-align: center;
  4. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <table id="table">
  3.   <tr>
  4.     <td><input></td>
  5.     <td><input></td>
  6.     <td><input></td>
  7.     <td><input></td>
  8.     <td><input readonly class="sum" placeholder="Sum"></td>
  9.   </tr>
  10.   <tr>
  11.     <td><input></td>
  12.     <td><input></td>
  13.     <td><input></td>
  14.     <td><input></td>
  15.     <td><input readonly class="sum" placeholder="Sum"></td>
  16.   </tr>
  17.   <tr>
  18.     <td></td>
  19.     <td></td>
  20.     <td></td>
  21.     <td></td>
  22.     <td><input readonly class="total" placeholder="Total"></td>
  23.   </tr>
  24. </table>
英文:

I recommend to use CSS classes instead of IDs that will allow you to calculate a separate row and have any numbers of rows. An example of the total sum is also provided.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(&#39;#table&#39;).on(&#39;input&#39;, &#39;input:not(.sum, .total)&#39;, e =&gt; {
  3.   const $table = $(e.originalEvent.currentTarget);
  4.   const $row = $(e.target).closest(&#39;tr&#39;);
  5.   
  6.   const calcSum = (elem, from) =&gt; {
  7.     const sum = [...from].reduce((sum, elem) =&gt; {
  8.       const val = parseFloat(elem.value);
  9.       return sum + (val === val ? val : 0);
  10.     }, 0) || NaN;
  11.     elem.val(sum === sum ? sum : &#39;&#39;);
  12.   };
  13.   
  14.   // calc sum of the row
  15.   calcSum($row.find(&#39;.sum&#39;), $row.find(&#39;:not(.sum)&#39;));
  16.  
  17.   // calc total
  18.   calcSum($table.find(&#39;.total&#39;), $table.find(&#39;.sum&#39;));
  19.  
  20. });

<!-- language: lang-css -->

  1. input{
  2.   max-width:100px;
  3.   text-align: center;
  4. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;table id=&quot;table&quot;&gt;
  3.   &lt;tr&gt;
  4.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  5.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  6.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  7.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  8.     &lt;td&gt;&lt;input readonly class=&quot;sum&quot; placeholder=&quot;Sum&quot;&gt;&lt;/td&gt;
  9.   &lt;/tr&gt;
  10.   &lt;tr&gt;
  11.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  12.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  13.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  14.     &lt;td&gt;&lt;input&gt;&lt;/td&gt;
  15.     &lt;td&gt;&lt;input readonly class=&quot;sum&quot; placeholder=&quot;Sum&quot;&gt;&lt;/td&gt;
  16.   &lt;/tr&gt;
  17.   &lt;tr&gt;
  18.     &lt;td&gt;&lt;/td&gt;
  19.     &lt;td&gt;&lt;/td&gt;
  20.     &lt;td&gt;&lt;/td&gt;
  21.     &lt;td&gt;&lt;/td&gt;
  22.     &lt;td&gt;&lt;input readonly class=&quot;total&quot; placeholder=&quot;Total&quot;&gt;&lt;/td&gt;
  23.   &lt;/tr&gt;  
  24. &lt;/table&gt;

<!-- end snippet -->

答案2

得分: 2

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11.   <title> Example</title>
  12.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  13. </head>
  14. <body>
  15.   <table id="table">
  16.     <thead>
  17.       <tr>
  18.         <th>Input 1</th>
  19.         <th>Input 2</th>
  20.         <th>Input 3</th>
  21.         <th>Input 4</th>
  22.         <th>Input 5</th>
  23.         <th>Total</th>
  24.       </tr>
  25.     </thead>
  26.     <tbody>
  27.       <tr>
  28.         <td><input type="text" class="input-box" /></td>
  29.         <td><input type="text" class="input-box" /></td>
  30.         <td><input type="text" class="input-box" /></td>
  31.         <td><input type="text" class="input-box" /></td>
  32.         <td><input type="text" class="input-box" /></td>
  33.         <td><input type="text" class="total-input" readonly /></td>
  34.       </tr>
  35.       <!-- Add more rows as needed -->
  36.     </tbody>
  37.   </table>
  39.   <script src="script.js"></script>
  40. </body>
  41. </html>
  44. <script>
  45. $(document).ready(function() {
  46.   // Function to update the total
  47.   function updateTotal(row) {
  48.     var total = 0;
  49.     var inputs = row.find('.input-box');
  51.     // Iterate through each input box in the current row
  52.     inputs.each(function() {
  53.       var value = parseFloat($(this).val());
  55.       // Check if the value is a valid number
  56.       if (!isNaN(value)) {
  57.         total += value;
  58.       }
  59.     });
  61.     // Set the total value in the last input box of the same row
  62.     row.find('.total-input').val(total);
  63.   }
  65.   // Listen for input changes on the input boxes
  66.   $('.input-box').on('input', function() {
  67.     var row = $(this).closest('tr');
  68.     updateTotal(row);
  69.   });
  70. });
  72. </script>
  74. </body>
  75. </html>
  77. <!-- end snippet -->
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;body&gt;
  4. &lt;!DOCTYPE html&gt;
  5. &lt;html&gt;
  6. &lt;head&gt;
  7. &lt;title&gt; Example&lt;/title&gt;
  8. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;table id=&quot;table&quot;&gt;
  12. &lt;thead&gt;
  13. &lt;tr&gt;
  14. &lt;th&gt;Input 1&lt;/th&gt;
  15. &lt;th&gt;Input 2&lt;/th&gt;
  16. &lt;th&gt;Input 3&lt;/th&gt;
  17. &lt;th&gt;Input 4&lt;/th&gt;
  18. &lt;th&gt;Input 5&lt;/th&gt;
  19. &lt;th&gt;Total&lt;/th&gt;
  20. &lt;/tr&gt;
  21. &lt;/thead&gt;
  22. &lt;tbody&gt;
  23. &lt;tr&gt;
  24. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input-box&quot; /&gt;&lt;/td&gt;
  25. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input-box&quot; /&gt;&lt;/td&gt;
  26. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input-box&quot; /&gt;&lt;/td&gt;
  27. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input-box&quot; /&gt;&lt;/td&gt;
  28. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;input-box&quot; /&gt;&lt;/td&gt;
  29. &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;total-input&quot; readonly /&gt;&lt;/td&gt;
  30. &lt;/tr&gt;
  31. &lt;!-- Add more rows as needed --&gt;
  32. &lt;/tbody&gt;
  33. &lt;/table&gt;
  34. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  35. &lt;/body&gt;
  36. &lt;/html&gt;
  37. &lt;script&gt;
  38. $(document).ready(function() {
  39. // Function to update the total
  40. function updateTotal(row) {
  41. var total = 0;
  42. var inputs = row.find(&#39;.input-box&#39;);
  43. // Iterate through each input box in the current row
  44. inputs.each(function() {
  45. var value = parseFloat($(this).val());
  46. // Check if the value is a valid number
  47. if (!isNaN(value)) {
  48. total += value;
  49. }
  50. });
  51. // Set the total value in the last input box of the same row
  52. row.find(&#39;.total-input&#39;).val(total);
  53. }
  54. // Listen for input changes on the input boxes
  55. $(&#39;.input-box&#39;).on(&#39;input&#39;, function() {
  56. var row = $(this).closest(&#39;tr&#39;);
  57. updateTotal(row);
  58. });
  59. });
  60. &lt;/script&gt;
  61. &lt;/body&gt;
  62. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 19:22:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431335.html
  • html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定