使用javascript在表格中添加所有文本框值

Question

我想使用jquery在表格中添加所有文本框值。

  <script>
    str =0;
   $(document).ready(function(){
       $('#btn_res').click(function(){
           $('#calculate').find("input[type=text]").each(function(){
               str+=$(this).text();
           })
           $('#result').text(str);
       });
   });
</script>

Answer 1

你需要

$(document).ready(function() {
  $('#btn_res').click(function() {
    var str = 0;
    $('#calculate').find("input[type=text]").each(function() {
      //need to use .val()
      //also need to convert it to a numerical value for addition else string concatenation will be done
      str += (+$(this).val() || 0);
    })
    $('#result').text(str);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>

Answer 2

使用val()因为您正在获取表单输入字段值

$('#btn_res').click(function(){
           $('#calculate').find("input[type=text]").each(function(){
               str+=$(this).val();
           })
           $('#result').text(str);
       });

Answer 3

我自己的建议如下：

$(document).ready(function() {
  $('#btn_res').click(function() {
    // find all the relevant input elements directly (no need
    // to use 'find()'; then iterate over those elements with 'map()':
    var str = $('#calculate input[type="text"]').map(function() {
      // this returns the value of the input (as a number) or a 0 (if
      // the input is not a valid number):
      return parseFloat((this.value || 0));
    // 'get()' converts the object to an array,
    // 'reduce' reduces the array to a single result:
    }).get().reduce(function(a, b) {
      // returns the sum of the array's elements:
      return a + b;
    });
    $('#result').text(str);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>

参考文献：

• JavaScript的：
  • Array.prototype.reduce()。
  • parseFloat()。
• jQuery的：
  • get()。
  • map()。
  • text()。