Jquery 和 CSS 添加 HTML 代码

Question

以下代码段显示了我想要对 html 表进行的一些更改，如果成绩大于或等于 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); } });

 .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

您需要更改 CSS 选择器以仅针对第二个td ：

.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>

或者，您可以修改 JS 以仅将该类应用于所需的td而不是tr ：

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

Answer 2

看起来您需要在 td 而不是 tr 上切换类。

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