87,901
社区成员
发帖
与我相关
我的任务
分享
<table style="width:430px;height:330px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tr id="TitleStyleRead">
<td width="19" id="TitleStyleRead"></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">AAA</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">BBB</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">CCC</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">DDD</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">EEE</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">FFF</div> </td>
<td width="60" id="TitleStyleRead"><div id="ColumnsTitle">GGG</div></td>
<td> </td>
</tr>
<tr style="height:300px;">
<td colspan="9">"</td>
</tr>
</table>
function onclick ()
{
show(aa)
}
<table style="width:430px;height:330px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tr id="TitleStyleRead">
<td width="19" id="TitleStyleRead"></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">AAA</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">BBB</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">CCC</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">DDD</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">EEE</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">FFF</div> </td>
<td width="60" id="TitleStyleRead"><div id="ColumnsTitle">GGG</div></td>
<td> </td>
</tr>
<tr style="height:300px;">
<td colspan="9">"</td>
</tr>
</table>
<script>
document.onclick=function(e){
e=e||event;
var obj=e.srcElement||e.target;
if(obj.id=="ColumnsTitle"){
var p=obj.innerHTML;
/*
//如果要传递对应的参数,这个参考对照下修改
switch(obj.innerHTML){
case "AAA":p="X";break;
case "BBB":p="Y";break;
//...其他的对应
}
*/
show(p);
}
}
function show(aa)
{
alert("你点击的div的内容为\t"+aa+"\n如果需要,你可以在上面的代码中更改传入函数的参数值");
}
</script>
<!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>hello</title>
<meta http-equiv="Content-Type" Content="text/html;charset=utf-8" />
<script type="text/javascript">
window.onload = function()
{
var d = document.getElementsByTagName("div");
for(var i=0;i<d.length;i++)
{
if(d[i].id = "ColumnsTitle") d[i].onclick = showme;
}
}
function showme()
{
var tmp = this.innerHTML;
alert(tmp);
}
</script>
</head>
<body>
<div class="fixed">测试一下效果</div>
<table style="width:430px;height:330px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tr id="TitleStyleRead">
<td width="19" id="TitleStyleRead"></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">AAA</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">BBB</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">CCC</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">DDD</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">EEE</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">FFF</div> </td>
<td width="60" id="TitleStyleRead"><div id="ColumnsTitle">GGG</div></td>
<td> </td>
</tr>
<tr style="height:300px;">
<td colspan="9">"</td>
</tr>
</table>
</body>
</html>
<table style="width:430px;height:330px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tr id="TitleStyleRead">
<td width="19" id="TitleStyleRead"></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle" onclick="show(this)">AAA</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle" onclick="show(this)">BBB</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle" onclick="show(this)">CCC</div> </td>
<td> </td>
</tr>
<tr style="height:300px;">
<td colspan="9">"</td>
</tr>
</table>
<script>
function show(obj){
switch(obj.innerHTML){
case "AAA":
obj.innerHTML = "X";
break;
case "BBB":
obj.innerHTML = "Y";
break;
case "CCC":
obj.innerHTML = "Z";
break;
case "X":
obj.innerHTML = "AAA";
break;
case "Y":
obj.innerHTML = "BBB";
break;
case "Z":
obj.innerHTML = "CCC";
break;
default:
break;
}
}
</script>
<script type="text/javascript">
window.onload=function(){
var oTd=document.getElementById("tdContent");
var aDivs=oTd.getElementsByTagName("div");
var i,nLen=aDivs.length;
for(i=0;i<nLen;i++){
aDivs[i].onclick=function(e){
var evt=e||window.event;
var srcEl=evt.target||evt.srcElement;
alert(srcEl.innerHTML);
}
}
}
</script>
<table style="width:430px;height:330px;" border="1" cellpadding="0" cellspacing="0" align="center">
<tr id="tdContent">
<td width="19" id="TitleStyleRead"></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">AAA</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">BBB</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">CCC</div> </td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">DDD</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">EEE</div></td>
<td width="40" id="TitleStyleRead"><div id="ColumnsTitle">FFF</div> </td>
<td width="60" id="TitleStyleRead"><div id="ColumnsTitle">GGG</div></td>
<td> </td>
</tr>
<tr style="height:300px;">
<td colspan="9">"</td>
</tr>
</table>