怎么用js更改tr的背景颜色 新手
日期：2014-05-16 浏览次数：20366 次
如何用js更改tr的背景颜色 新手求助
有个1个table，里面有11个tr，
除了第一个tr里是只有一个td （一个 button ， onclick = "erase()")
剩下的tr中都是10个td，
每当按下erase的时候，要将非第一个tr中的所有cell背景设置成白色。
请问如何写erase（） 这个方法
听朋友说要用到DOM 的 childNodes ？
哪位前辈可以给出出主意 谢谢
------解决方案--------------------
有个1个table，里面有11个tr，
除了第一个tr里是只有一个td （一个 button ， onclick = "erase()")
剩下的tr中都是10个td，
每当按下erase的时候，要将非第一个tr中的所有cell背景设置成白色。
请问如何写erase（） 这个方法
听朋友说要用到DOM 的 childNodes ？
哪位前辈可以给出出主意 谢谢
------解决方案--------------------
- HTML code
<!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的结合，简单方便
------解决方案--------------------
- HTML code
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
