Number is Defined greater than or less than

For Example, Number is Defined greater than or less than...

Demo

1st Grade : If number is greater than or equal to 80, color Green.
Fail : If number is less than or equal to 35, color Red.

Name: Maths Science English Practical
Student 38 32 65 81
Student 2 80 42 78 35
Student 3 20 58 98 69

HTML

<p>1st Grade : If number is greater than or equal to 80, color Green. <br>
Fail : If number is less than or equal to 35, color Red.</p>

<table>
    <thead>
        <tr>
            <th>Name:</th>
            <th>Maths</th>
            <th>Science</th>
            <th>English</th>
            <th>Practical</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Student</td>
            <td>38</td>
            <td>32</td>
            <td>65</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Student 2</td>
            <td>80</td>
            <td>42</td>
            <td>78</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Student 3</td>
            <td>20</td>
            <td>58</td>
            <td>98</td>
            <td>69</td>
        </tr>
    </tbody>
</table>

CSS

<style>
    table { 
        border-collapse: collapse; 
        border: 1px solid gray; 
    }
    table tr td:first-child { 
        color:#333; 
    }
    td, th { 
        padding: 5px; 
        border: 1px solid gray; 
    }
    td { 
        color:orange
    }
    th { 
        background-color: #EEEEEE; 
    }
</style>    

Javascript

$('table td').each(function () {
    if ($(this).text() >= 80) {
        $(this).css({'color':'green','font-weight':'bold'})
    } else if ($(this).text() <= 35) {
        $(this).css({'color':'red','font-weight':'bold'})
    }
});

Copyright 2016 by WebiBeris.com. All Rights Reserved.