</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>
function erase() { var trs = document.getElementsByTagNameId("tr"); for (var i = 1; i < trs.length; i++) { trs[i].childNode.style.bgColor = "black"; } } //这样写为什么不行呢
谢谢meng 你看我这样写为何不可呢？ function erase() { var trs = document.getElementsByTagNameId("tr"); for (var i = 1; i < trs.length; i++) { trs[i].childNode.style.bgColor = "black"; } }
一起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"; } }
<!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>
"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>
.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 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>
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
//这样写为什么不行呢
谢谢meng 你看我这样写为何不可呢？ function erase() {
var trs = document.getElementsByTagNameId("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].childNode.style.bgColor = "black";
}
}
<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>
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";
}
}
}