Clever Geek Handbook

Change css and add jquery to some tables

I have a problem. I want to do something to check some scores in a list of tables, and if it is equal to or equal to 5, it should put red on it. The following code is a list of 3 courses.

If you run the HTML you will see that the scores are 5 .. 2.5 ... 7.5

And when I run jsfiddle

$('.topBorderLight').each(function(){
    var $this = $(this);
    var grade = Number($this.text());
    if(!isNaN(grade)) {
        $this.closest('tr').toggleClass('gradeOver5', grade >= 5);
    }
});
      

        
        
        
      

    
.gradeOver5,
.gradeOver5 td {
    color: red;
    text-decoration: line-through;
}
      

        
        
        
      

    
<tr>
    <td colspan="2">
        <table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
            <tbody>
                <tr>
                    <td colspan="10" class="groupHeader">Semester A</td>
                </tr>
                <tr height="25" class="italicHeader">
                    <td valign="top"></td>
                    <td colspan="2" valign="top">Course</td>
                    <td valign="top">Type</td>
                    <td valign="top">SM</td>
                    <td valign="top">Hours</td>
                    <td valign="top">ECTS</td>
                    <td valign="top">GRADE</td>
                    <td valign="top">Exam</td>
                </tr>
                <tr height="25" bgcolor="#fafafa">
                    <td valign="top">&nbsp;<img align="absbottom" src="images/course4.gif" width="16"/></td>
                    <td colspan="2" valign="top" class="topBorderLight">(Ν2-1011)&nbsp; PHYSICS<span class="redfonts"></span></td>
                    <td valign="top" class="topBorderLight">COMPULSORY</td>
                    <td valign="top" class="topBorderLight"> 6</td>
                    <td valign="top" class="topBorderLight">6</td>
                    <td valign="top" class="topBorderLight"> 7</td>
                    <td valign="top" class="topBorderLight"><span class="redFonts">5</span></td>
                    <td nowrap="true" class="topBorderLight"><span class="tablecell"><i>Ξ‘ WINTER&nbsp;
                        2012-2013</i></span>
                    </td>
                </tr>



            </tbody>
        </table>
    </td>
</tr>


<tr>
    <td colspan="2">
        <table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
            <tbody>
                <tr>
                    <td colspan="10" class="groupHeader">Semester A</td>
                </tr>
                <tr height="25" class="italicHeader">
                    <td valign="top"></td>
                    <td colspan="2" valign="top">Course</td>
                    <td valign="top">Type</td>
                    <td valign="top">SM</td>
                    <td valign="top">Hours</td>
                    <td valign="top">ECTS</td>
                    <td valign="top">GRADE</td>
                    <td valign="top">Exam</td>
                </tr>                   
                
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
   <td valign="top">&nbsp;<img align="absbottom" src="images/course1.gif" width="16"></td>
   <td colspan="2" valign="top" class="topBorderLight">(Ν2-4021)&nbsp;PRO<span class="redfonts"></span></td>
   <td valign="top" class="topBorderLight">COMPULSORY</td>
   <td valign="top" class="topBorderLight"> 4</td>
   <td valign="top" class="topBorderLight">4</td>
   <td valign="top" class="topBorderLight"> 4</td>
   <td valign="top" class="topBorderLight"><span class="redFonts">7.5</span></td>
   <td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER&nbsp;
      2014-2015</i></span>
   </td>
</tr>



            </tbody>
        </table>
    </td>
</tr>


<tr>
    <td colspan="2">
        <table border="0" cellpadding="4" cellspacing="0" width="100%" align="center">
            <tbody>
                <tr>
                    <td colspan="10" class="groupHeader">Semester A</td>
                </tr>
                <tr height="25" class="italicHeader">
                    <td valign="top"></td>
                    <td colspan="2" valign="top">Course</td>
                    <td valign="top">Type</td>
                    <td valign="top">SM</td>
                    <td valign="top">Hours</td>
                    <td valign="top">ECTS</td>
                    <td valign="top">GRADE</td>
                    <td valign="top">Exam</td>
                </tr>
                
<tr height="25" bgcolor="#fafafa" class="gradeOver5">
   <td valign="top">&nbsp;<img align="absbottom" src="images/course1.gif" width="16"></td>
   <td colspan="2" valign="top" class="topBorderLight">(Ν2-4021)&nbsp; SAE1<span class="redfonts"></span></td>
   <td valign="top" class="topBorderLight">COMPULSORY</td>
   <td valign="top" class="topBorderLight"> 4</td>
   <td valign="top" class="topBorderLight">4</td>
   <td valign="top" class="topBorderLight"> 6</td>
   <td valign="top" class="topBorderLight"><span class="redFonts">2.5</span></td>
   <td nowrap="true" class="topBorderLight"><span class="tablecell"><i>A WINTER&nbsp;
      2014-2015</i></span>
   </td>
</tr>



            </tbody>
        </table>
    </td>
</tr>
Run codeHide result


My problem is that it is putting the string in 2.5 class and not 5 class.

Can anyone help me find the tricky part here? Many thanks!

+3


source to share


3 answers


While your code works great in the JSFiddle, you want to modify your jQuery a bit to look like this. It's just to handle the possibility of potential commas instead of decimal places in your numbers, since the class Number

doesn't like formatted numbers 2,5

and would prefer2.5 

$('.topBorderLight').each(function(){
    var $this = $(this);
    var text = $this.text();
    text = text.replace(',', '.');
    var grade = Number(text);
    if(!isNaN(grade)) {
        $this.closest('tr').toggleClass('gradeOver5', grade >= 5);
    }
});


See a working version of this using commas in evaluations here

+3


source


I just added your code to the js fiddle and used the newest version of jquery and works great.



$('.topBorderLight').each(function(){
var $this = $(this);
var grade = Number($this.text());
if(!isNaN(grade)) {
    $this.closest('tr').toggleClass('gradeOver5', grade >= 5);
}
});
+1


source


Other columns (SM / Hours / ECTS) are parsed as numbers too, so they run in a loop, try adding a class to only classes:

...
<td valign="top" class="topBorderLight"><span class="redFonts grade">5</span></td>
...

Then update jquery:

$('.grade').each(function(){
...
0


source






More articles:


All Articles