javascript - 使用for循环求和

Question

我想从输入字段中查找总计并将总计值设置为特定的文本字段。这是我的 Html:

 <table id="table" border="1">

 <tr>
     <td></td>
     <td colspan="4">Injuried</td>
     <td colspan="4">Killed</td>
     <td colspan="4">Died</td>
 </tr>
<tr>
     <td></td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
    <td>adult</td>
     <td>young</td>
     <td>children</td>
     <td>total</td>
</tr>

<tr>
    <td>number</td>
    <td><input type="text" size="5" /></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text"size="5" /></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>

</tr>
<tr>
     <td>number</td>
    <td><input type="text" size="5" /></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text"size="5" /></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>
    <td><input type="text" size="5"/></td>
     <td><input type="text" size="5"/></td>

</tr>
</table>

这里我想添加每行中的每个成人、青少年、 child 字段，并将值设置为相应的总计列。为此我使用了 for 循环。但添加时显示一些错误。这是我的示例代码。 http://jsfiddle.net/3gxnya5a/

Answer 1

您可以使用像这样的简单循环

$(document).ready(function () {
    $('#table').on('keyup', 'input', function () {

        //loop through each 4th td in each rows as they are the sum elements
        $("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
            var sum = 0;
            //add up the previous 4 values
            $(this).prevAll(':lt(3)').find('input').each(function () {
                sum += (+this.value || 0)
            });
            $(this).find('input').val(sum)
        })
    })
})

$(document).ready(function() {
  $('#table').on('keyup', 'input', function() {

    $("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
      var sum = 0;
      $(this).prevAll(':lt(3)').find('input').each(function() {
        sum += (+this.value || 0)
      });
      $(this).find('input').val(sum)
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <td></td>
    <td colspan="4">Injuried</td>
    <td colspan="4">Killed</td>
    <td colspan="4">Died</td>
  </tr>
  <tr>
    <td></td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
    <td>adult</td>
    <td>young</td>
    <td>children</td>
    <td>total</td>
  </tr>
  <tr>
    <td>number</td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
  </tr>
  <tr>
    <td>number</td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
    <td>
      <input type="text" size="5" />
    </td>
  </tr>
</table>