除了第一个tr里是只有一个td （一个 button ， onclick = "erase()")
剩下的tr中都是10个td，
每当按下erase的时候，要将非第一个tr中的所有cell背景设置成白色。
请问如何写erase（） 这个方法
听朋友说要用到DOM 的 childNodes ？
哪位前辈可以给出出主意 谢谢
12 个解决方案
#1
<!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>
#2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Drawing Program</title>
<style type="text/css">
/* #canvas selects the elemnet with id="canvas" */
#canvas{
width: 400px;
border: 1px solid #999999;
border-collapse: collapse;
}
td{
width: 4px;
height: 4px;
}
th.key{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999;
}
</style>
<script type="text/javascript">
<!--
//initialization function to insert cells into the table
function createCanvas() {//======================================================
var side = 100;
//IE will not dynamically (i.e. in script) append rows directly to a <table> but will do so to a <tbody>
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; i++) {
var row = document.createElement("tr"); // row is reused to reference each new row
for (var j = 0; j < side; j++) {
var cell = document.createElement("td"); // cell is reused to reference each new cell
cell.onmousemove = processMouseMove; // register event handler traditionally
row.appendChild(cell);
} // end for each cell
tbody.appendChild(row);
} // end for each row
}
// processes the onmousemove event
function processMouseMove(e) {//================================================
// if FF e will be available as formal parameter (i.e. DOM2 compliant)
if (!e)
var e = window.event; // if IE no e but can use window.event (i.e. NOT DOM2 compliant)
// e now cross-browser compliant
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey)
this.style.backgroundColor = "blue"; // this is the <td> the mouse is currently moving over i.e. the element that caused this script to execute
// turn the cell red if the Shift key is pressed
if (e.shiftKey)
this.style.backgroundColor = "red";
} // end function processMouseMove
function erase() {
}
}
// -->
</script>
</head>
<!-- colspan: number of columns to extend <th> or <td> over, <tt> monospace font -->
<body onload="createCanvas()">
<table id="canvas" >
<tbody id="tablebody">
<tr>
<th class="key" colspan="100">
<input type="button" value="Erase" onclick="erase(); "/>
</th>
</tr>
</tbody>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Drawing Program</title>
<style type="text/css">
/* #canvas selects the elemnet with id="canvas" */
#canvas{
width: 400px;
border: 1px solid #999999;
border-collapse: collapse;
}
td{
width: 4px;
height: 4px;
}
th.key{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999;
}
</style>
<script type="text/javascript">
<!--
//initialization function to insert cells into the table
function createCanvas() {//======================================================
var side = 100;
//IE will not dynamically (i.e. in script) append rows directly to a <table> but will do so to a <tbody>
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; i++) {
var row = document.createElement("tr"); // row is reused to reference each new row
for (var j = 0; j < side; j++) {
var cell = document.createElement("td"); // cell is reused to reference each new cell
cell.onmousemove = processMouseMove; // register event handler traditionally
row.appendChild(cell);
} // end for each cell
tbody.appendChild(row);
} // end for each row
}
// processes the onmousemove event
function processMouseMove(e) {//================================================
// if FF e will be available as formal parameter (i.e. DOM2 compliant)
if (!e)
var e = window.event; // if IE no e but can use window.event (i.e. NOT DOM2 compliant)
// e now cross-browser compliant
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey)
this.style.backgroundColor = "blue"; // this is the <td> the mouse is currently moving over i.e. the element that caused this script to execute
// turn the cell red if the Shift key is pressed
if (e.shiftKey)
this.style.backgroundColor = "red";
} // end function processMouseMove
function erase() {
}
}
// -->
</script>
</head>
<!-- colspan: number of columns to extend <th> or <td> over, <tt> monospace font -->
<body onload="createCanvas()">
<table id="canvas" >
<tbody id="tablebody">
<tr>
<th class="key" colspan="100">
<input type="button" value="Erase" onclick="erase(); "/>
</th>
</tr>
</tbody>
</table>
</body>
</html>
#3
现在可以通过 按下 shift 或者 ctrl 在canva上画不同的颜色， 然后想通过erase button 来重置
#4
谢谢imtns的方法， 但我想知道的是 ， 如何只针对对下面的tr有作用而不改变第一个tr的背景， 因button 在第一个tr里。
#5
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的结合，简单方便
.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的结合，简单方便
#6
谢谢 lingyun ， 这次主要是为了考察 DOM object， 所以老师想让使用到row的property 比如 childNodes 之类的来完成最后的效果
#7
<!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>
#8
function erase() {
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
//这样写为什么不行呢
#9
谢谢meng 你看我这样写为何不可呢？
function erase() {
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
#10
额。。是 TagName， 但依然不行
#11
<!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>
#12
一起OK了， 感谢楼上每一位前辈的帮助。
function erase() {
var trs = document.getElementsByTagName("tr");
for (var i = 1; i < trs.length; i++) {
for (var l = 0; l < trs[i].childNodes.length; l++){
trs[i].childNodes[l].style.backgroundColor = "white";
}
}
}
#1
<!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>
#2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Drawing Program</title>
<style type="text/css">
/* #canvas selects the elemnet with id="canvas" */
#canvas{
width: 400px;
border: 1px solid #999999;
border-collapse: collapse;
}
td{
width: 4px;
height: 4px;
}
th.key{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999;
}
</style>
<script type="text/javascript">
<!--
//initialization function to insert cells into the table
function createCanvas() {//======================================================
var side = 100;
//IE will not dynamically (i.e. in script) append rows directly to a <table> but will do so to a <tbody>
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; i++) {
var row = document.createElement("tr"); // row is reused to reference each new row
for (var j = 0; j < side; j++) {
var cell = document.createElement("td"); // cell is reused to reference each new cell
cell.onmousemove = processMouseMove; // register event handler traditionally
row.appendChild(cell);
} // end for each cell
tbody.appendChild(row);
} // end for each row
}
// processes the onmousemove event
function processMouseMove(e) {//================================================
// if FF e will be available as formal parameter (i.e. DOM2 compliant)
if (!e)
var e = window.event; // if IE no e but can use window.event (i.e. NOT DOM2 compliant)
// e now cross-browser compliant
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey)
this.style.backgroundColor = "blue"; // this is the <td> the mouse is currently moving over i.e. the element that caused this script to execute
// turn the cell red if the Shift key is pressed
if (e.shiftKey)
this.style.backgroundColor = "red";
} // end function processMouseMove
function erase() {
}
}
// -->
</script>
</head>
<!-- colspan: number of columns to extend <th> or <td> over, <tt> monospace font -->
<body onload="createCanvas()">
<table id="canvas" >
<tbody id="tablebody">
<tr>
<th class="key" colspan="100">
<input type="button" value="Erase" onclick="erase(); "/>
</th>
</tr>
</tbody>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Drawing Program</title>
<style type="text/css">
/* #canvas selects the elemnet with id="canvas" */
#canvas{
width: 400px;
border: 1px solid #999999;
border-collapse: collapse;
}
td{
width: 4px;
height: 4px;
}
th.key{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999;
}
</style>
<script type="text/javascript">
<!--
//initialization function to insert cells into the table
function createCanvas() {//======================================================
var side = 100;
//IE will not dynamically (i.e. in script) append rows directly to a <table> but will do so to a <tbody>
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; i++) {
var row = document.createElement("tr"); // row is reused to reference each new row
for (var j = 0; j < side; j++) {
var cell = document.createElement("td"); // cell is reused to reference each new cell
cell.onmousemove = processMouseMove; // register event handler traditionally
row.appendChild(cell);
} // end for each cell
tbody.appendChild(row);
} // end for each row
}
// processes the onmousemove event
function processMouseMove(e) {//================================================
// if FF e will be available as formal parameter (i.e. DOM2 compliant)
if (!e)
var e = window.event; // if IE no e but can use window.event (i.e. NOT DOM2 compliant)
// e now cross-browser compliant
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey)
this.style.backgroundColor = "blue"; // this is the <td> the mouse is currently moving over i.e. the element that caused this script to execute
// turn the cell red if the Shift key is pressed
if (e.shiftKey)
this.style.backgroundColor = "red";
} // end function processMouseMove
function erase() {
}
}
// -->
</script>
</head>
<!-- colspan: number of columns to extend <th> or <td> over, <tt> monospace font -->
<body onload="createCanvas()">
<table id="canvas" >
<tbody id="tablebody">
<tr>
<th class="key" colspan="100">
<input type="button" value="Erase" onclick="erase(); "/>
</th>
</tr>
</tbody>
</table>
</body>
</html>
#3
现在可以通过 按下 shift 或者 ctrl 在canva上画不同的颜色， 然后想通过erase button 来重置
#4
谢谢imtns的方法， 但我想知道的是 ， 如何只针对对下面的tr有作用而不改变第一个tr的背景， 因button 在第一个tr里。
#5
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的结合，简单方便
.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的结合，简单方便
#6
谢谢 lingyun ， 这次主要是为了考察 DOM object， 所以老师想让使用到row的property 比如 childNodes 之类的来完成最后的效果
#7
<!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>
#8
function erase() {
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
//这样写为什么不行呢
#9
谢谢meng 你看我这样写为何不可呢？
function erase() {
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
#10
额。。是 TagName， 但依然不行
#11
<!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>
#12
一起OK了， 感谢楼上每一位前辈的帮助。
function erase() {
var trs = document.getElementsByTagName("tr");
for (var i = 1; i < trs.length; i++) {
for (var l = 0; l < trs[i].childNodes.length; l++){
trs[i].childNodes[l].style.backgroundColor = "white";
}
}
}