I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?

[asifakhtar]

<table class="table table-borderless table-sm">
   <thead id="headTargets">
      <tr>
         <th width="80px">Period</th>
         <th width="150px">Month</th>
         <th width="80px">Status</th>
         <th width="100px">Actual Value</th>
         <th width="100px">Initial Target</th>
         <th></th>
      </tr>
   </thead>
   <tbody id="bodyTargets">
      <tr id="trDataPoint_23139687" data-recordid="23139687">
         <td id="tdProjectMonth_23139687">15</td>
         <td id="tdCalendarMonth_23139687">2024 - March</td>
         <td id="tdStatusL3_23139687">Pending</td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139687" data-oldvalue="" id="txtActualValue_23139687" data-prevrecordid="" value=""></td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139687" data-oldvalue="" id="txtInitialTarget_23139687" data-prevrecordid="" value=""></td>
         <td></td>
      </tr>
      <tr id="trDataPoint_23139688" data-recordid="23139688">
         <td id="tdProjectMonth_23139688">16</td>
         <td id="tdCalendarMonth_23139688">2024 - April</td>
         <td id="tdStatusL3_23139688">Pending</td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139688" data-oldvalue="" id="txtActualValue_23139688" data-prevrecordid="txtActualValue_23139687" value=""></td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139688" data-oldvalue="" id="txtInitialTarget_23139688" data-prevrecordid="txtInitialTarget_23139687" value=""></td>
         <td></td>
      </tr>     
   </tbody>
</table>

$("#bodyTargets tr").filter(function (index) {
                const firstTdText = Number($(this).find("td:first").text()) || 0;
                return !(firstTdText >= (Number($txtStartMonth.val()) || 0) && firstTdText <= (Number($txtEndMonth.val()) || 0));
            }).each(function (index,element) {
$(this).find("input").each(function() {
    $(this).prop("disabled", true);
    $(this).css('color', 'red');
});
$(this).find("td").each(function() {                       
    $(this).css('color', 'red');
});
});

 

[VBService]

Try like this

$('#bodyTargets tr').filter(function() {
  const firstTdText = Number($(this).find('td:first').text()) || 0;
  return !(firstTdText >= (Number($txtStartMonth.val()) || 0) && firstTdText <= (Number($txtEndMonth.val()) || 0));
}).each(function() {
  $(this).find('td, td input').each(function() {
    $(this).prop('disabled', true);
    $(this).css('color', 'red');
  });
});

or

$('#bodyTargets tr').filter(function() {
  const firstTdText = Number($(this).find('td:first').text()) || 0;
  return !(firstTdText >= (Number($txtStartMonth.val()) || 0) && firstTdText <= (Number($txtEndMonth.val()) || 0));
}).each(function() {
  $(this).find('td, input').each(function() {
    $(this).prop('disabled', true);
    $(this).css('color', 'red');
  });
});

 

[VBService]

one more example ...
add to css

#bodyTargets input {
  color: inherit;
}

or

#bodyTargets input {
  color: currentcolor;
}

and

$('#bodyTargets tr').filter(function() {
  const firstTdText = Number($(this).find('td:first').text()) || 0;
  return !(firstTdText >= (Number($txtStartMonth.val()) || 0) && firstTdText <= (Number($txtEndMonth.val()) || 0));
}).each(function() {
  $(this).find('input').prop('disabled', true);
  $(this).css('color', 'red');
});

 

[VBService]

JavaScript:

$('#bodyTargets tr').filter(function() {
  const firstTdText = Number($(this).find('td:first').text()) || 0;
  return !(firstTdText >= (Number($txtStartMonth.val()) || 0) && firstTdText <= (Number($txtEndMonth.val()) || 0));
}).each(function() {
  $(this).find('input').prop('disabled', true);
  $(this).css('color', 'red');
});

now you have loop for rows <tr> only

 

[asifakhtar]

now you have loop for rows <tr> only

View attachment 2680

txs it works. Appreciated.