代码如下:
<!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>