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>

在这里，我想在每一行中添加每个成人，年轻，儿童字段，并将值设置为相应的总列。我用于此循环。但它在添加时显示一些错误。这是我的示例代码。 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>

Answer 2

已经回答，但我觉得值得添加替代方案。

如果您向要添加的列添加属性，则在添加列/移动列时，您的代码不会中断，例如：

<table id='theTable'>
  <tbody>
    <tr>
      <td><input type="text" size="5" class='data-add' /></td>
      <td><input type="text" size="5" class='data-add' /></td>
      <td><input type="text" size="5" /></td>
      <td><input type="text" size="5" class='data-total'/></td>

然后

$("#theTable>tbody>tr").each(function() {
    var sum = 0;
    $(".data-add", this).each(function() {
        sum += (+this.value || 0);  // stolen from Arun to ignore invalid values etc
    });
    $(".data-total", this).val(sum);
});

使用for循环求和

2 个答案: