Javascript 根据单元格内容更改样式元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8722680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing style elements based on cell contents
提问by user1129274
I have a table, like so:
我有一张桌子，就像这样：
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>one</td>
</tr>
</table>
Using Javascript, how can I search the table and change a style element (e.g. backgroundColor) based on the contents of a cell (e.g. make the background color of all cells with the word 'one' in them red)?
使用Javascript，我如何搜索表格并backgroundColor根据单元格的内容更改样式元素（例如）（例如，将所有带有“一”字的单元格的背景颜色设为红色）？
回答by Adam Rackis
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";
}
回答by jfriend00
Here's code that searches the table and sets the background color of all cells who's contents is "one". I assume you can adapt this to check for other values:
这是搜索表格并设置内容为“一”的所有单元格的背景颜色的代码。我假设您可以调整它以检查其他值：
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";
}
}
with this HTML:
使用此 HTML：
<table id="test">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>one</td>
</tr>
</table>
And here's a working demo: http://jsfiddle.net/jfriend00/Uubqg/
这是一个工作演示：http: //jsfiddle.net/jfriend00/Uubqg/
回答by Michael Berkowski
Use getElementsByTagName()to return the cells, and match the words in their innerTextproperty:
使用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";
}
}
Note: This will match the word "one" anywhere in the cell.
注意：这将匹配单元格中任意位置的单词“one”。
回答by Sergio Tulentsev
Also, a jQueryexample (for full picture)
另外，一个jQuery示例（用于全图）
$.each($('td'), function () {
if($(this).html() == 'one') {
$(this).css('background-color', 'red');
}
});
Demo: http://jsbin.com/ulexub
回答by Ed Heal
Why use Javascript to do this? Instead deliver the table with the cells having the appropriate class e.g.
为什么要使用 Javascript 来做到这一点？而是提供具有适当类别的单元格的表格，例如
<td class="oneCell">One</td>
Then simply use CSS to style the contents as you see fit.
然后简单地使用 CSS 设置您认为合适的内容样式。
If you really need to use Javascript you need to look into DOM. There are various references on line, for example http://www.howtocreate.co.uk/tutorials/javascript/domstructure
如果您确实需要使用 Javascript，则需要查看 DOM。网上有各种参考资料，例如http://www.howtocreate.co.uk/tutorials/javascript/domstructure
回答by citynorman
I wanted a dynamic solution based on value and did this
我想要一个基于价值的动态解决方案并做到了
$('.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');
}
});
