代码如下:
<!
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" xml:lang ="en" lang ="en" >
< head >
< title ></ title >
< style type ="text/css" >
.class1 {
background : #efefef ;
text-align : center ;
width : 80px ;
}
.class2 {
background : #ffcc00 ;
text-align : center ;
width : 80px ;
}
.class3 {
background : #ffffff ;
}
.class4 {
background : #ffff00 ;
}
</ style >
< script type ="text/javascript" >
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true ;
} else if (elm.attachEvent){
var r = elm.attachEvent( " on " + evType, fn);
return r;
} else {
alert( " Handler could not be removed " );
}
}
function initTd(){
var sections = document.getElementsByTagName( " td " );
for ( var i = 0 ;i < sections.length;i ++ ){
var section = sections[i];
if (section.getAttribute( " t " ) == " yes " ){
section.className = " class1 " ;
section.nextSibling.className = " class3 " ;
addEvent(section, " click " ,changeTd);
}
}
}
function changeTd(ev){
var ev = ev || window.event;
var evt = ev.srcElement || ev.target;
if (evt.tagName == " TD " && evt.getAttribute( " t " ) == " yes " ){
var sections = document.getElementsByTagName( " td " );
for ( var i = 0 ;i < sections.length;i ++ ){
var section = sections[i];
if (section.getAttribute( " t " ) == " yes " ){
section.className = " class1 " ;
section.nextSibling.className = " class3 " ;
evt.className = " class2 " ;
evt.nextSibling.className = " class4 " ;
}
}
}
}
</ script >
</ head >
< body >
< table cellpadding ="0" cellspacing ="0" border ="1" bordercolor ="#cccccc" style ="border-collapse:collapse" align ="center" width ="300" >
< tr >< td t ="yes" > a </ td >< td > this is section a </ td ></ tr >
< tr >< td t ="yes" > b </ td >< td > this is section b </ td ></ tr >
< tr >< td t ="yes" > c </ td >< td > this is section c </ td ></ tr >
< tr >< td t ="yes" > d </ td >< td > this is section d </ td ></ tr >
</ table >
< script type ="text/javascript" >
initTd();
</ script >
</ body >
</ html >
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
< head >
< title ></ title >
< style type ="text/css" >
.class1 {
background : #efefef ;
text-align : center ;
width : 80px ;
}
.class2 {
background : #ffcc00 ;
text-align : center ;
width : 80px ;
}
.class3 {
background : #ffffff ;
}
.class4 {
background : #ffff00 ;
}
</ style >
< script type ="text/javascript" >
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true ;
} else if (elm.attachEvent){
var r = elm.attachEvent( " on " + evType, fn);
return r;
} else {
alert( " Handler could not be removed " );
}
}
function initTd(){
var sections = document.getElementsByTagName( " td " );
for ( var i = 0 ;i < sections.length;i ++ ){
var section = sections[i];
if (section.getAttribute( " t " ) == " yes " ){
section.className = " class1 " ;
section.nextSibling.className = " class3 " ;
addEvent(section, " click " ,changeTd);
}
}
}
function changeTd(ev){
var ev = ev || window.event;
var evt = ev.srcElement || ev.target;
if (evt.tagName == " TD " && evt.getAttribute( " t " ) == " yes " ){
var sections = document.getElementsByTagName( " td " );
for ( var i = 0 ;i < sections.length;i ++ ){
var section = sections[i];
if (section.getAttribute( " t " ) == " yes " ){
section.className = " class1 " ;
section.nextSibling.className = " class3 " ;
evt.className = " class2 " ;
evt.nextSibling.className = " class4 " ;
}
}
}
}
</ script >
</ head >
< body >
< table cellpadding ="0" cellspacing ="0" border ="1" bordercolor ="#cccccc" style ="border-collapse:collapse" align ="center" width ="300" >
< tr >< td t ="yes" > a </ td >< td > this is section a </ td ></ tr >
< tr >< td t ="yes" > b </ td >< td > this is section b </ td ></ tr >
< tr >< td t ="yes" > c </ td >< td > this is section c </ td ></ tr >
< tr >< td t ="yes" > d </ td >< td > this is section d </ td ></ tr >
</ table >
< script type ="text/javascript" >
initTd();
</ script >
</ body >
</ html >