Jquery and CSS add on HTML code

Question

The following snippet is showing some changes i want to do to an html table, if the grade is greater or equal than 5 it should put a red line over the course.

But i want to do it ONLY for the course name (for example Physics) and not for the hole line.

Could someone tell me what is my mistake here? Because i cant figure it out.

Thanks a lot!

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <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>

Answer 1

You need to change the CSS selector to target the second td only:

.gradeOver5 td:nth-child(2) {
    color: red;
    text-decoration: line-through;
}

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

 .gradeOver5 td:nth-child(2) { 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>

Alternatively, you can amend the JS to only apply that class to the required td instead of the tr :

$this.closest('tr').find('td:eq(2)').toggleClass('gradeOver5', grade >= 5);

Answer 2

It looks like you need to toggle the class on td not on tr.

if(!isNaN(grade)) {
        $this.closest('td').toggleClass('gradeOver5', grade >= 5);
    }