我需要使用java脚本更改表中单个单元格的背景颜色.
在文档中我需要所有单元格的样式应该相同(所以使用样式表来添加它.),但是在按钮单击时我需要更改第一个单元格的颜色.
以下是示例代码
<html lang="en">
<head>
<script type="text/javascript" >
function btnClick()
{
var x = document.getElementById("mytable").cells;
x[0].innerHTML = "i want to change my cell color";
x[0].bgColor = "Yellow";
}
</script>
</head>
<style>
div
{
text-align: left;
text-indent: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
td.td
{
border-width : 1px;
background-color: #99cc00;
text-align:center;
}
</style>
<body>
<div>
<table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;">
<tr valign="top">
<td class = "td"><br /> </td>
<td class = "td"><br /> </td>
</tr>
<tr valign="top">
<td class = "td"><br /> </td>
<td class = "td"><br /> </td>
</tr>
</table>
</div>
<input type="button" value="Click" OnClick = "btnClick()">
</body>
</html>
nnn*_*nnn 40
试试这个:
function btnClick() {
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].innerHTML = "i want to change my cell color";
x[0].style.backgroundColor = "yellow";
}
从JS设置,backgroundColor相当于background-color你的样式表.
另请注意,.cells集合属于表行,而不属于表本身.要从所有行获取所有单元格,您可以改为使用getElementsByTagName().
演示:http://jsbin.com/ekituv/edit#preview
小智 9
<table border="1" cellspacing="0" cellpadding= "20">
<tr>
<td id="id1" ></td>
</tr>
</table>
<script>
document.getElementById('id1').style.backgroundColor='#003F87';
</script>
将id添加到单元格,然后更改单元格的背景.
小智 5
document.getElementById('id1').bgColor = '#00FF00';
似乎有效。我认为不会.style.backgroundColor。