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

Changing style elements based on cell contents

本文关键字：样式 元素 单元格      更新时间：2023-09-26

我有一个表，像这样:

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

使用Javascript，我如何搜索表，并根据单元格的内容更改样式元素(例如backgroundColor)(例如，使所有单元格的背景颜色与单词"一"在他们的红色)?

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

下面的代码搜索表格并设置内容为"one"的所有单元格的背景颜色。我假设您可以调整它来检查其他值:

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/

使用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"。

还有一个jQuery示例(全图)

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

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

为什么使用Javascript做这个?取而代之的是，使用具有适当类(例如

)的单元格传递表。
<td class="oneCell">One</td>

然后简单地使用CSS样式的内容，你认为合适。

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

我想要一个基于值的动态解决方案，我这样做了

    $('.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');
        }
    });
相关文章：