根据单元格内容更改样式元素答案

【问题标题】：Changing style elements based on cell contents根据单元格内容更改样式元素
【发布时间】：2012-01-04 06:05:01
【问题描述】：

我有一张桌子，像这样：

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

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

【问题讨论】：

标签： javascript html-table

【解决方案1】：

DEMO

var allTableCells = document.getElementsByTagName("td");

for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];

    //get the text from the first child node - which should be a text node
    var currentText = node.childNodes[0].nodeValue; 

    //check for 'one' and assign this table cell's background color accordingly 
    if (currentText === "one")
        node.style.backgroundColor = "red";
}

【讨论】：

谢谢，这太完美了！我会早点做出回应，但我不得不对 OpenDNS 大喊大叫。

【解决方案2】：

这里的代码搜索表格并设置所有内容为“一”的单元格的背景颜色。我假设您可以调整它以检查其他值：

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";
    }
}

使用此 HTML：

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

这是一个工作演示：http://jsfiddle.net/jfriend00/Uubqg/

【讨论】：

【解决方案3】：

使用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";
  }
}

注意：这将匹配单元格中任何位置的单词“one”。

Here it is in action on jsFiddle.

【讨论】：

【解决方案4】：

另外，jQuery 示例（完整图片）

$.each($('td'), function () {
  if($(this).html() == 'one') {
    $(this).css('background-color', 'red');
  }
});

演示：http://jsbin.com/ulexub

【讨论】：

【解决方案5】：

为什么要使用 Javascript 来做到这一点？而是提供具有适当类的单元格的表格，例如

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

然后只需使用 CSS 来设置您认为合适的内容样式。

如果你真的需要使用 Javascript，你需要研究 DOM。网上有各种参考，比如http://www.howtocreate.co.uk/tutorials/javascript/domstructure

【讨论】：

为什么要使用 Javascript 来做到这一点？因为有时您不知道表格单元格中的内容，或者您想要搜索的内容。例如，让用户搜索表格并突出显示与输入文本匹配的单元格。
真的 - 服务器或 Javascript 的某些部分需要将数据放入单元格中 - 因此能够设置类。
但是你不能为每一个可能的单元格值编造一个类名。
示例（基于Adam Rackis's answer）：jsfiddle.net/CjW77/1
是的，你可以 - 单元格的数量是有限的。只需给它们编号，例如cell1 cell2 .... 但这个问题暗示人们希望所有具有特定值的单元格都具有样式。我给出的使用 Javascript 的解决方案既更简单，也适用于没有启用 javascript 的人。

【解决方案6】：

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

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

【讨论】：