javascript - 编辑 css 并在一些表中添加 jquery

Question

我遇到了这个问题。我想做一些事情来检查表格列表中的某些等级，如果它超过或等于 5，它应该在它上面放一个红色的孤岛。以下代码是包含 3 门类(class)的列表。

如果您运行 html 代码，您将看到成绩为 5 .. 2.5 ... 7.5

当我运行到 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>

我的问题是它把线放在 2.5 年级而不是 5 年级。

有人可以帮我找到这里棘手的部分吗？非常感谢!

Answer 1

尽管您的代码在 JSFiddle 中运行得非常好，但您希望稍微更改 jQuery，使其看起来像这样。这只是为了处理数字中可能使用逗号而不是小数的可能性，因为 Number 类不喜欢格式为 2,5 的数字，更喜欢 2.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);
    }
});

在成绩中使用逗号查看此工作版本 here