Jquery和CSS添加HTML代码

时间：2015-06-30 16:19:07

标签： javascript jquery html css

以下代码段显示了我想对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>

2 个答案:

答案 0 :(得分：1)

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

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

＆＃13;
＆＃13; 
$('.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);
  }
});
＆＃13; 
.gradeOver5 td:nth-child(2) {
  color: red;
  text-decoration: line-through;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

答案 1 :(得分：0)

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

if(!isNaN(grade)) {
        $this.closest('td').toggleClass('gradeOver5', grade >= 5);
    }
相关问题
最新问题