Javascript 基于单元格内容更改样式元素

我有一张桌子，像这样：

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>one</td>
  </tr>
</table>

一
二
三
一

---

使用Javascript，我如何搜索表格并根据单元格的内容更改样式元素（例如，使所有单元格的背景颜色中的单词“一”变为红色）？

以下是搜索表格并设置所有单元格的背景颜色（其内容为“一”）的代码。我假设您可以调整此选项以检查其他值：

var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
    if (cells[i].innerHTML == "one") {
        cells[i].style.backgroundColor = "red";
    }
}

var cells=document.getElementById（“test”）.getElementsByTagName（“td”）；
对于（变量i=0；i

使用此HTML：

<table id="test">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>one</td>
  </tr>
</table>

一
二
三
一

---

下面是一个有效的演示：

使用

getElementsByTagName（）

返回单元格，并匹配其

innerText

属性中的单词：

var tds = document.getElementById("table-id").getElementsByTagName("td");
var num_tds = tds.length;
for (var i = 0; i < num_tds; i++) {
  if (tds[i].innerText.indexOf("one") > -1) {
    tds[i].style.backgroundColor = "red";
  }
}

var tds=document.getElementById（“表id”）.getElementsByTagName（“td”）；
var num_tds=tds.length；
对于（var i=0；i-1）{
tds[i].style.backgroundColor=“红色”；
}
}

注意：这将匹配单元格中任意位置的“一”字

var allTableCells=document.getElementsByTagName（“td”）；
对于（var i=0，max=allTableCells.length；i

还有一个示例（用于全图）

---

演示：

为什么要使用Javascript来执行此操作？相反，交付表格时，单元格应具有适当的类别，例如

<td class="oneCell">One</td>

1

然后简单地使用CSS为内容设置合适的样式

---

如果您真的需要使用Javascript，那么您需要研究DOM。网上有各种各样的参考资料，例如，

我想要一个基于价值的动态解决方案，并做到了这一点

    $('.dataframe td').each(function(){
        var num = parseFloat($(this).text());
        if (num > 0) {
            $(this).addClass('success');
            //$(this).css('color','Green');
        } else if (num < 0) {
            $(this).addClass('danger');
            //$(this).css('color','Red');
        }
    });

$（'.dataframe td'）。每个（函数（）{
var num=parseFloat（$（this.text（））；
如果（数值>0）{
$（this.addClass（'success'）；
//$（this.css（'color'，'Green'）；
}else if（num<0）{
$（this.addClass（'danger'）；
//$（this.css（'color'，'Red'）；
}
});

为什么要使用Javascript执行此操作？因为有时候你不知道表格单元格中会有什么，或者你想搜索什么。例如，让用户搜索表格并突出显示与输入文本匹配的单元格。实际上-服务器或Javascript的某些部分需要将数据放入单元格中-因此可以设置类。但不能为每个可能的单元格值编造一个类名。例如（基于）：可以-单元格数量有限。只需给它们编号，例如cell1 cell2。。。。但这个问题意味着这个人希望所有具有特定值的单元格都有一个样式。我给出的使用Javascript的解决方案既简单又适用于未启用Javascript的用户。谢谢，这太完美了！我本来应该早点回应的，但我不得不对OpenDNS大喊大叫。

<td class="oneCell">One</td>

    $('.dataframe td').each(function(){
        var num = parseFloat($(this).text());
        if (num > 0) {
            $(this).addClass('success');
            //$(this).css('color','Green');
        } else if (num < 0) {
            $(this).addClass('danger');
            //$(this).css('color','Red');
        }
    });