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>

Rory McCrossan · Accepted Answer · 2015-06-30 16:22:27Z

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

Oh.. so it was a css problem. i was searching about jquery mistake. Thanks a lot anyway!!! I can accept your solution in 8 minutes fyi

guergana · Accepted Answer · 2015-06-30 16:23:32Z

0

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

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

answered Jun 30, 2015 at 16:23

guergana

3745 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery and CSS add on HTML code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related