Question

我有一张桌子，就像这样：

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

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

Answer 1

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

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/

Answer 2

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

Answer 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.

Answer 4

另外，jQuery示例（全图）

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

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

Answer 5

为什么要使用Javascript来执行此操作？而是使用具有适当类别的单元格来传递表格，例如

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

然后只需使用CSS根据需要设置内容的样式。

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

Answer 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');
        }
    });

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

6 个答案: