javascript - Jquery 和 CSS 添加 HTML 代码

标签 javascript jquery html css

下面的代码片段显示了我想对 html 表格做的一些更改，如果成绩大于或等于 5，它应该在类(class)上画一条红线。

但我只想为类(class)名称做这件事(例如物理) 而不是孔线。

有人能告诉我我的错误是什么吗？因为我想不通。

非常感谢! 

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

最佳答案

您需要更改 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);

关于javascript - Jquery 和 CSS 添加 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31143421/

上一篇：HTML 解析 : Get content from inner tags

下一篇：html - 如何在 PNG 图像可见部分上叠加背景图案？

相关文章：

javascript - $ ('.myclass' ) 仅当在此 ID 下时

html - 在 HTML 页面输入值中使用双引号

javascript - 使用数据价格属性过滤产品列表

javascript - 将 jquery-csv 与 webpack 一起使用？

javascript - div重叠另一个虽然div的位置是相对的

jquery - 在 jQuery Accordion 导航上切换 CSS 类

Jquery 在颜色和黑白图像之间淡入淡出

javascript - Fullcalendar v5 最后一小时在设置 slotMaxTime dinamiclly 后不显示

javascript - jQuery 更多变量分号或逗号 - 基本

javascript - 检查 div 的内容以应用特定 ID

©2024 IT工具网  联系我们