改变风格元素

我有一个表，像这样：改变风格元素

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

使用JavaScript，我怎么可以搜索该表并更改基于单元格的内容的样式元素（如backgroundColor）（例如，使所有单元格中的单词'one'的背景颜色变成红色）？

谢谢！

来源

2012-01-04 user1129274

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

来源

2012-01-04 06:09:29

谢谢你，这是完美的！我会尽快回复，但我不得不在OpenDNS上大喊大叫。 – user1129274 2012-01-04 07:22:52

这是代码，用于搜索表格并设置内容为“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/

来源

2012-01-04 06:08:17 jfriend00

使用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.

来源

2012-01-04 06:08:35

此外，（全图）一个jQuery例如

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

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

来源

2012-01-04 06:09:33

为什么使用Javascript功能来做到这一点？而是用具有适当类别的单元格递送该表格，例如

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

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

如果您确实需要使用Javascript，则需要查看DOM。有在网上各种参考，例如http://www.howtocreate.co.uk/tutorials/javascript/domstructure

来源

2012-01-04 06:09:38

为什么使用Javascript来做到这一点？因为有时候你不知道表格单元中会出现什么，或者你想要搜索什么。例如，让用户搜索表格并突出显示与输入文本匹配的单元格。 – 2012-01-04 06:12:45

真的 - 服务器或Javascript的某些部分需要将数据放入单元格中 - 因此可以设置类。 – 2012-01-04 06:16:20

但是你不能为每个可能的单元格值创建一个类名称。 – 2012-01-04 06:18:38

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

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

来源

2017-01-08 20:00:38 citynorman

改变风格元素

回答

相关问题