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

正如我在推荐中提到的，遍历每一行并搜索每一行中的所有inputs。如果您只需要获取具有特定名称的输入，您可以使用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>

Answer 2

遍历每一行，然后在内部遍历每一列。如果名称不包含TotalHours，则将其值添加到总和中。如果它确实包含TotalHours，则将值设置为等于总和。这是一个值不为 0 且未隐藏的示例。

$('tr').each(function(index) {
  var sum=0;
  $('td input',this).each(function(){
    if($(this).attr('name').indexOf('TotalHours')==-1){
      sum+=parseInt($(this).val());
    }else{
      $(this).val(sum);
    }
  });
});

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

Answer 3

您可以使用 JavaScript String search() 方法来匹配输入名称。

在字符串中搜索指定值，并返回匹配的位置。该值可以是字符串或正则表达式。如果未找到匹配项，则该方法返回 -1。

下面，通过每个tr 进行迭代 然后每个input，它搜索 特定名称，如果不等于 -1，则变量 totalHours 接收值：

$('tr').each(function() {
    var totalHours = 0;

    $(this).find('input').each(function() {
        if ($(this).attr("name").search("Sched") != -1 
                || $(this).attr("name").search("Comp") != -1 
                || $(this).attr("name").search("NoShow") != -1) {
            totalHours += Number($(this).val());
        } 
    });

    $(this).find('input[name*="TotalHours"]').val(totalHours);
});

检查一下：

JSFiddle