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

KarimAli
September 29, 2023
238 views
0 votes
2 Answers

$("#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');
  });
});

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

Tags: jquery

Answers

You can do this without each:

$("#bodyTargets td, #bodyTargets input").css({color: 'red'});
$("#bodyTargets input").prop("disabled", true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="def"></td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139687" data-oldvalue="" id="txtInitialTarget_23139687" data-prevrecordid="" value="def"></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="abc"></td>
         <td width="100px"><input class="form-control target-form" data-recordid="23139688" data-oldvalue="" id="txtInitialTarget_23139688" data-prevrecordid="txtInitialTarget_23139687" value="abc"></td>
         <td></td>
      </tr>      
   </tbody>
</table>

You can use find to get both input and td and then in one each loop do what you need.

$("#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));
}).find("input, td").each(function() {
  if ($(this).is("input")) {
    $(this).prop("disabled", true);
  }
  $(this).css('color', 'red');
});

Please signup or login to give your own answer.

Click here to cancel reply.