CODEWITHSUNDEEP
jqueryhtmlarrays
WHoward
WHoward

Reputation: 141

jQuery set value of table cell depending on value of another cell using Array and if/else if

I'm trying to conditionally set the value of the <td class="slaClass"></td> cells depending on the value in the <td class="DaysLeft"></td> cells.

The console.log($(this).text()); shows the array perfectly, I just can't figure out how to translate this into the if/else if statement.

For now I just want to insert text, but eventually, it'll be icons. There'd be additional if else criteria eventually but for now simple is best.

HTML Code:

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

Jquery code;

window.onload = sla;

function sla() {
    var daysLeft = document.getElementsByClassName('DaysLeft');
    var slaClass = document.getElementsByClassName('slaClass');

    $(daysLeft).each(function() {
        console.log($(this).text());

        if (daysLeft <= 30) {
            console.log('Red');
        }
        else if (daysLeft > 30) {
            console.log('Warning');
        }
        else if (daysLeft >= 90) {
            console.log('Green');
        }
    });            
};

Upvotes: 2

Views: 324

Answers (4)

Negi Rox
Negi Rox

Reputation: 3932

If you are using JQuery you don't need window.onload function.

$(document).ready(function(){
       var daysLeft = $('.DaysLeft');
        $(daysLeft).each(function() {
             console.log($(this).text()); //remember $(this).text() will return a string value so either convert it to integer or change your condition with string values.
            var currentVal=$(this).text(); // assign a current value to increase its performance.
            if(currentVal !="" && currentVal!=undefined)
            {
               if (parseInt(currentVal) <= 30) {
                console.log('Red');
               }
               else if (parseInt(currentVal) > 30) {
                console.log('Warning');
               }
               else if (parseInt(currentVal) >= 90) {
                console.log('Green');
               }
           }
        })
})

Upvotes: 2

Maksym Labutin
Maksym Labutin

Reputation: 571

It should be like 

$(daysLeft).each(function(data) {
            console.log($(this).text());
            var value = parseInt(data.val());

            if (value <= 30) {
                console.log('Red');
            }
            else if (value > 30) {
                console.log('Warning');
            }
            else if (value >= 90) {
                console.log('Green');
            }
        });

Upvotes: 0

Jan Andersen
Jan Andersen

Reputation: 773

The logic is a bit flawed as the console would never show Green as long as there is no limitation on the interval of the Warning condition because both 62 and 125 are greater than 30. The Warning condition should be limited like this:

if (value > 30 && value < 90) {
   console.log('Warning');
}

Which would catch 62, but not 125, that would pass on to the Green condition.

Alternatively, you could also simply move Green up as the second condition, before the Warning like this: 

if (daysLeft <= 30) {
   console.log('Red');
} else if (daysLeft >= 90) {
   console.log('Warning');
} else if (daysLeft > 30) {
   console.log('Green');
}

Upvotes: 0

Khazul
Khazul

Reputation: 179

You are using daysLeft in condition, where daysLeft is DOM element.

Use :

if (parseInt($(this).text()) <= 30)

Upvotes: 0

Related Questions