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

Joined
Oct 24, 2013
Messages
43
Reaction score
0
HTML:
<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>

JavaScript:
$("#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');
});
});
 
Joined
Jul 4, 2023
Messages
356
Reaction score
41
Try like this
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('td, td input').each(function() {
    $(this).prop('disabled', true);
    $(this).css('color', 'red');
  });
});

or
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('td, input').each(function() {
    $(this).prop('disabled', true);
    $(this).css('color', 'red');
  });
});
 
Last edited:
Joined
Jul 4, 2023
Messages
356
Reaction score
41
one more example ...
add to css
CSS:
#bodyTargets input {
  color: inherit;
}

or
CSS:
#bodyTargets input {
  color: currentcolor;
}

and
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');
});
 
Joined
Jul 4, 2023
Messages
356
Reaction score
41
JavaScript:
Code:
$('#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 ;)

1696046100560.png
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top