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



<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');
});
});


You can loop through all DOM elements and check on input or td in the loop. But if that makes to code more clean? I doubt

It certainly won’t make it noticeably faster if that’s what you’re after. Unless you’re dealing with massive amounts of data I find it’s usually better to err on the side of readable code rather than performance.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.