CODEWITHSUNDEEP
jqueryhtmlarrays
WHoward
WHoward

Reputation: 141

jQuery set value of td cell depending on values of other cells using Array and if/else if

I've Run into another problem trying to show different SLA statuses in the slaClass td.

I was previously using console.log("red") etc to show the statuses for testing. This worked perfectly, however when then trying to set the text for the slaClass field it just shows Warning and not the correct values. 

$(document).ready(function() {
  var daysLeft = $('.DaysLeft');
  var sla = $('.slaClass');
  $(daysLeft).each(function() {
    var daysLeft = $(this).text(); // assign a current value to increase its performance.

    if (daysLeft != "" && daysLeft != undefined) {
      if (parseInt(daysLeft) <= 30) {
        console.log('Red');
        $(sla).text('Red');
      } else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
        console.log('Warning');
        $(sla).text('Warning');
      } else if (parseInt(daysLeft) >= 90) {
        console.log('Green');
        $(sla).text('Green');
      }
    } else(alert("Error"));
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Applicants</th>
      <th>Interviews</th>
      <th>Offers</th>
      <th>Days Left to Fill </th>
      <th>SLA</th>
    </tr>
    <tr>
      <td>530</td>
      <td>50</td>
      <td>1</td>
      <td class="DaysLeft">125</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>56</td>
      <td>0</td>
      <td>0</td>
      <td class="DaysLeft">25</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>82</td>
      <td>6</td>
      <td>0</td>
      <td class="DaysLeft">62</td>
      <td class="slaClass"></td>
    </tr>
  </tbody>
</table>

Demo code - http://jsfiddle.net/ZmesE/294/

Upvotes: 0

Views: 29

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337656

The issue is because you're updating all the .slaClass elements instead of the one related to the current .DaysLeft element in the each iteration. To fix this, use closest() to get the parent tr of the current element. Try this:

$(document).ready(function() {
  $('.DaysLeft').each(function() {
    var $sla = $(this).closest('tr').find('.slaClass');
    var daysLeft = $(this).text();

    if (daysLeft != "" && daysLeft != undefined) {
      if (parseInt(daysLeft) <= 30) {
        console.log('Red');
        $sla.text('Red');
      } else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
        console.log('Warning');
        $sla.text('Warning');
      } else if (parseInt(daysLeft) >= 90) {
        console.log('Green');
        $sla.text('Green');
      }
    } else(alert("Error"));
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Applicants</th>
      <th>Interviews</th>
      <th>Offers</th>
      <th>Days Left to Fill </th>
      <th>SLA</th>
    </tr>
    <tr>
      <td>530</td>
      <td>50</td>
      <td>1</td>
      <td class="DaysLeft">125</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>56</td>
      <td>0</td>
      <td>0</td>
      <td class="DaysLeft">25</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>82</td>
      <td>6</td>
      <td>0</td>
      <td class="DaysLeft">62</td>
      <td class="slaClass"></td>
    </tr>
  </tbody>
</table>

Also note that in your original logic DaysLeft and slaClass are already jQuery objects, so you don't need to put them in jQuery objects again.

It's also not a good idea to re-use the same variable name, even if it is in a different scope. That could very easily lead to some unnecessary confusion.

Upvotes: 2

MikeS
MikeS

Reputation: 1764

The problem is that you are not grabbing the sibling ".slaClass" element from your current ".daysLeft" element.

Try this:

        $(document).ready(function(){
               var daysLeft = $('.DaysLeft');

                $(daysLeft).each(function() {
                    var daysLeft=$(this).text(); // assign a current value to increase its performance.
        var sla = $(this).siblings('.slaClass');
                    if(daysLeft !="" && daysLeft!=undefined)
                    {
                       if (parseInt(daysLeft) <= 30) {
                           console.log('Red');
                           $(sla).text('Red');
                        }else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
                           console.log('Warning');
                           $(sla).text('Warning');
                        }else if (parseInt(daysLeft) >= 90) {
                           console.log('Green');
                           $(sla).text('Green');
                        }
                   }
                   else(alert("Error"));
                })
        });

Upvotes: 2

Related Questions