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>

我想为每一行添加Modeln.Sched + Modeln.Comp + Modeln.NoShow = Modeln.TotalHours。

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

蒂娅！

Answer 1

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