改变风格元素
我有一个表,像这样:改变风格元素
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>one</td>
</tr>
</table>
使用JavaScript,我怎么可以搜索该表并更改基于单元格的内容的样式元素(如backgroundColor
) (例如,使所有单元格中的单词'one'的背景颜色变成红色)?
谢谢!
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');
}
});
为什么使用Javascript功能来做到这一点?而是用具有适当类别的单元格递送该表格,例如
<td class="oneCell">One</td>
然后,只要使用CSS来设置您认为合适的内容的样式。
如果您确实需要使用Javascript,则需要查看DOM。有在网上各种参考,例如http://www.howtocreate.co.uk/tutorials/javascript/domstructure
为什么使用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');
}
});
谢谢你,这是完美的!我会尽快回复,但我不得不在OpenDNS上大喊大叫。 – user1129274 2012-01-04 07:22:52