Question

我想做的是让所有<td> - 条目包含内容＆＃34; x＆＃34;红色。

所以：

<table>
    <tr>
        <td>Mini Contests</td>
        <td>5</td>
        <td>5.0</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

最后4个条目应为红色。

Answer 1

您可以简单地使用nth-last-child来设置TD的样式。此代码将影响最后4项（将颜色更改为红色）：

td:nth-last-child(-n+4) {
    color: red;
}

这个人的背景是红色的：

td:nth-last-child(-n+4) {
        background: red;
    }

Answer 2

如果不添加带有围绕X的类的元素，则无法使用。

<td><span class="redbg">x</span></td>

Answer 3

要获得它，您可以执行以下操作：

1st：在页面设置类的开头

.red {
    background: red;
}

第二：然后把你的表和其他HTML代码

第3名：在页面末尾使用javascript将类red应用于包含“x”的所有单元格：

<script>
  var cells = document.getElementsByTagName("td");
  for (i=0; i<cells.length; i++) {
      if(cells[i].innerHTML == "x") cells[i].className = "red";
  }
</script>

以下是一个工作示例：

  var cells = document.getElementsByTagName("td");
  for (i=0; i<cells.length; i++) {
      if(cells[i].innerHTML == "x") cells[i].className = "red";
  }

.red {
    background: red;
}

td{
  width: 80px;
}

<table>
    <tr>
        <td>Mini Contests</td>
        <td>5</td>
        <td>5.0</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

如何根据值为表条目着色

3 个答案: