javascript - JQuery - 查找 Model[n].FieldName 并添加值

Question

我正在尝试查找并添加表每一行中索引字段的值。

 <tr>
   <td><input name="Model[0].Name" type="hidden" value="0" /></td>
   <td><input name="Model[0].Sched" type="hidden" value="0" /></td>
   <td><input name="Model[0].Comp" type="hidden" value="0" /></td>
   <td><input name="Model[0].NoShow" type="hidden" value="0" /></td>                    
   <td><input name="Model[0].TotalHours" type="hidden" value="0" /></td>
 </tr>
 <tr>
   <td><input name="Model[1].Name" type="hidden" value="0" /></td>
   <td><input name="Model[1].Sched" type="hidden" value="0" /></td>
   <td><input name="Model[1].Comp" type="hidden" value="0" /></td>
   <td><input name="Model[1].NoShow" type="hidden" value="0" /></td>                    
   <td><input name="Model[1].TotalHours" type="hidden" value="0" /></td>
 </tr>

我想为每行添加 Model[n].Sched + Model[n].Comp + Model[n].NoShow = Model[n].TotalHours。

我认为必须有一个简单的解决方案，但我必须使用不正确的关键字来寻找解决方案。

TIA!

Answer 1

正如我在推荐中提到的，迭代每一行并搜索每行中的所有输入。如果您必须仅获取具有特定名称的输入，则可以使用 attribute contains selector :

$('tr').each(function() {
  // Find the the input we want to set the value of
  $(this).find('input[name*="TotalHours"]').val(
    // Find the inputs we want to sum
    $(this).find('[name*="Sched"], [name*="Comp"], [name*="NoShow"]')
      // Get their values and convert them to numbers
      .map(function() { return Number(this.value); })
      .get()
      // sum the values
      .reduce(function(sum, v) { return sum + v; })
  );
});

$('tr').each(function() {
  // Find the the input we want to set the value of
  $(this).find('input[name*="TotalHours"]').val(
    // Find the inputs we want to sum
    $(this).find('[name*="Sched"], [name*="Comp"], [name*="NoShow"]')
    // Get theirs values and convert them to numbers
    .map(function() {
      return Number(this.value);
    })
    .get()
    // sum the values
    .reduce(function(sum, v) {
      return sum + v;
    })
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input name="[0].Sched" value="1" />
    </td>
    <td>
      <input name="[0].Comp" value="2" />
    </td>
    <td>
      <input name="[0].NoShow" value="3" />
    </td>
    <td>
      <input name="[0].TotalHours" value="0" />
    </td>
  </tr>
  <tr>
    <td>
      <input name="[1].Sched" value="4" />
    </td>
    <td>
      <input name="[1].Comp" value="5" />
    </td>
    <td>
      <input name="[1].NoShow" value="6" />
    </td>
    <td>
      <input name="[1].TotalHours" value="0" />
    </td>
  </tr>
</table>