代码
<!
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=utf-8" />
< title > 无标题文档 </ title >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
< script type ="text/javascript" >
function ShowHide(obj){
var objin = obj.parentElement.parentElement.rows[ 1 ].style;
// var objin=obj.parentElement.parentElement.parentElement.rows[1].style;
objin.display == " none " ? objin.display = " block " :objin.display = " none " ;
}
</ script >
</ head >
< body >
< table border ="1" cellpadding ="0" cellspacing ="0" >
< tbody >
< tr >
< td style ="cursor:pointer;" onclick ="ShowHide(this)" > Click Me! </ td >
</ tr >
< tr >
< td >< table >
< tr > 1111111111111111 </ tr >
< tr > 2222222222222222 </ tr >
< tr > 3333333333333333 </ tr >
< tr > 4444444444444444 </ tr >
< tr > 5555555555555555 </ tr >
</ table ></ td >
</ tr >
</ tbody >
</ table >
</ BODY >
</ HTML >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
< script type ="text/javascript" >
function ShowHide(obj){
var objin = obj.parentElement.parentElement.rows[ 1 ].style;
// var objin=obj.parentElement.parentElement.parentElement.rows[1].style;
objin.display == " none " ? objin.display = " block " :objin.display = " none " ;
}
</ script >
</ head >
< body >
< table border ="1" cellpadding ="0" cellspacing ="0" >
< tbody >
< tr >
< td style ="cursor:pointer;" onclick ="ShowHide(this)" > Click Me! </ td >
</ tr >
< tr >
< td >< table >
< tr > 1111111111111111 </ tr >
< tr > 2222222222222222 </ tr >
< tr > 3333333333333333 </ tr >
< tr > 4444444444444444 </ tr >
< tr > 5555555555555555 </ tr >
</ table ></ td >
</ tr >
</ tbody >
</ table >
</ BODY >
</ HTML >
</ body >
</ html >
感觉这个挺好,可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示,如"TD","TR","A"等。
偶应用event.srcElement把以前的一个代码重写了下,扩展了其功能,很简单的一段代码。
代码
<!
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=utf-8" />
< title > 无标题文档 </ title >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
< script type ="text/ecmascript" >
function tdClick(){
if (event.srcElement.tagName.toLowerCase() == ' td ' ){
alert( " 行: " + (event.srcElement.parentNode.rowIndex + 1 ) + " 列: " + (event.srcElement.cellIndex + 1 ));
// alert("行:"+(event.srcElement.parentElement.rowIndex+1));
}
}
</ script >
</ head >
< body >
< table align ="center" onclick ="tdClick()" width ="100%" height ="400" cellspacing ="1" border ="1" bordercolor ="#000000" bordercolorlight ="#000000" bordercolordark ="#C0C0C0" bgcolor ="#C0C0C0" >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
</ table >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
< script type ="text/ecmascript" >
function tdClick(){
if (event.srcElement.tagName.toLowerCase() == ' td ' ){
alert( " 行: " + (event.srcElement.parentNode.rowIndex + 1 ) + " 列: " + (event.srcElement.cellIndex + 1 ));
// alert("行:"+(event.srcElement.parentElement.rowIndex+1));
}
}
</ script >
</ head >
< body >
< table align ="center" onclick ="tdClick()" width ="100%" height ="400" cellspacing ="1" border ="1" bordercolor ="#000000" bordercolorlight ="#000000" bordercolordark ="#C0C0C0" bgcolor ="#C0C0C0" >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
< tr >
< td > </ td >
< td > </ td >
< td > </ td >
< td > </ td >
</ tr >
</ table >
</ body >
</ html >
对于以上Table中用bordercolordark和bordercolorlight的说明如下:
html 中bordercolordark和bordercolorlight的区别
窗体要呈现立体感时,需要两个边框为亮色,剩下两个边框为暗色。
bordercolorlight和bordercolordark分别代表亮色和暗色。
转自:http://www.cnblogs.com/shengel/archive/2008/07/28/1254286.html