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'}) } });