如何用js更改tr的背景颜色 新手求助
有个1个table，里面有11个tr，
除了第一个tr里是只有一个td （一个 button ， onclick = "erase()")
剩下的tr中都是10个td，
每当按下erase的时候，要将非第一个tr中的所有cell背景设置成白色。
请问如何写erase（） 这个方法
听朋友说要用到DOM 的 childNodes ？
哪位前辈可以给出出主意 谢谢
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script>window.onload = function(){ var cbs = document.getElementsByName("chk"); for(var i=0;i<cbs.length;i++) { if(cbs[i].checked==true) { cbs[i].parentNode.parentNode.style.backgroundColor="blue"; } }}</script></head><body><table><tr><td><input type="checkbox" name="chk" value="" checked="true"></td><td>1</td></tr><tr><td><input type="checkbox" name="chk" value=""></td><td>2</td></tr><tr><td><input type="checkbox" name="chk" value=""></td><td>3</td></tr></table></body></html>
[解决办法]
1：先在css里面定义好要用的样式：
.my_table td .firstTr_td{ background:#000}/*这里定义第一行tr内td的样式*/
.my_table td{ background:#fff}/*这里定义其它tr内td的样式*/
2：实现erase（）函数
function erase()
{
document.getElementById("my_table").className = "my_table";
}
3:HTML如下：
<table id="my_table">
<tr><td class="firstTr_td"><input onclick="erase()"/></td></tr>
<tr><td></td>....</tr> <!-- 这里有10个td -->
</table>
这种方法充分利用了CSS和JS的结合，简单方便
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title> <script type="text/javascript" language="javascript"> function erase() { var tblOne = document.getElementById("tblOne"); for(var nowindex = 1; nowindex < tblOne.rows.length; nowindex++ ) { tblOne.rows[nowindex].bgColor = "#FFFFFF"; } } </script></head><body> <form name="frmtable"> <table id = "tblOne" width="50%" border="1" height="50%" bgcolor="red" bordercolor="#FFFFFF"> <tr height="35px"> <td colspan="10"> <input type="button" value="改变颜色" onclick="erase()" /> </td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr><tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tr><tr height="35px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </form></body></html>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta http-equiv="Content-Type" content="text/html"; charset="gb2312" /><style type="text/css"> table{ background:#0F0;}</style></head><body><p> </p><table width="200" border="1"> <tr> <td colspan="10"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table><p> </p><input type="button" value="变色" id="btu1" onclick="clickk()" /><script type="text/javascript"> function clickk() { var a=new Array(); a=document.getElementsByTagName("tr"); for(var i=1;i<a.length;i++) { a[i].style.backgroundColor="Red"; } }</script></body></html>