多个相同ID的DIV,怎么进行操作?

去捕获click这个event的srcElement试试
ps：写出这样代码的人，每个月拿的薪水是负数吧？

代码是够差劲的
<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>

<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>

要传递的字符串有什么规律没~~~<div onclick="show()">11111111111111</div>
<div onclick="show()">33333333333</div>
<div onclick="show()">2222222222</div>
<div onclick="show()">55555555555555</div>
<div onclick="show()">7777777777777</div>
<script type="text/javascript">
function show()
{
str = event.srcElement;
alert(str.innerHTML)
}
</script>

.............楼主,哈哈,看吧,大家都知道id只能唯一,你非要弄这么多,如果你到其他地方要去取这个id号,那得怎么操作啊,,

<!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>

其它没变，就是把div的id当成一个属性就可以了.
这个if(d[i].id = "ColumnsTitle") d[i].onclick = showme；
就应该把=写成 ==的
即 if(d[i].id == "ColumnsTitle") d[i].onclick = showme

getElementByTagName();
得到数组

var divs = document.getElementById("tdContent").getElementsByTagName("div");

是一个数组，拼写应该是getElementsByTagName(),少了一个 s

我当然知道ID是唯一的,
我有在写XML的,ID有2个一样的就会出错
不过HTML了ID相同又不会出错,调用CSS样式又很方便,我又不是傻的,知道有错还用
传递字符串是没规律的,

<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>

调试易

多个相同ID的DIV,怎么进行操作?

解决方案 »