JQuery -查找模型[n].FieldName和添加值

本文关键字：FieldName 添加 查找 模型 JQuery | 更新日期: 2023-09-27 18:07:52

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

 <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>

我想添加模型[n]。调度+模型[n]。Comp + Model[n]。NoShow = Model[n]。

我认为这一定有一个简单的解决方案，但我必须在不正确的关键字中寻找解决方案。

TIA !

JQuery -查找模型[n].FieldName和添加值

正如我在推荐中提到的，遍历每一行并搜索每一行中的所有input。如果必须只获取具有特定名称的输入，则可以使用属性contains选择器:

$('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>

遍历每一行，然后遍历每一列。如果名称不包含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>

您可以使用JavaScript字符串搜索()方法来匹配输入的名称。

在字符串中搜索指定的值，并返回匹配的位置。取值为字符串或正则表达式。如果没有找到匹配，该方法返回-1。

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

$('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

相关文章：