循环设置onclick时，怎样获取当前的序号？

用for循环来添加onmouseover、onmouseout等事件的时候
怎样才能获取当前元素的序号 例如点击第2行的时候 第2行的循环序号i应该是1  但是获取的结果却是循环结束时i的值5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>JS touch show</title>
<style type="text/css">
.eee{ background:#ccc;}
.on{ background:red}
.click{ background:#333;color:#fff;}
li{width:100px;height:20px;background:black;margin-top:5px;}
</style>
<body>
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td>111111111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>3333333333333333</td>
  </tr>
  <tr>
    <td>444444444444444444444</td>
  </tr>
  <tr>
    <td>5555555555555</td>
  </tr>
</table>
<ul id="aa">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script language="javascript">
window.onload=function(){
var trs = document.getElementsByTagName('tr'),cur=trs[0];
var lis=document.getElementsByTagName('li');
for(var i=0; i<trs.length; i++){
trs[i].setAttribute('num',i);
trs[i].setAttribute('on','false');
trs[i].className='eee';
trs[i].onclick=function(){
    var a = this.getAttribute('on');
cur.className='eee';
cur.setAttribute('on','false');
(cur=this).setAttribute('on','true');
(cur=this).className = 'click';
alert(i);
}
trs[i].onmouseover=function(){
this.className=='click' ?'':this.className = 'on';
}
trs[i].onmouseout=function(){
this.className=='click'?'':this.className='eee';
}
}
}
</script>
</body>
</html>

解决方案 »

  1.   

    window.onload=function(){
        var trs = document.getElementsByTagName('tr'),cur=trs[0];
        var lis=document.getElementsByTagName('li');
        for(var i=0; i<trs.length; i++){
            trs[i].setAttribute('num',i);
            trs[i].setAttribute('on','false');
            trs[i].className='eee';        
            trs[i].onclick=function(){
                var a = this.getAttribute('on');
                cur.className='eee';
                cur.setAttribute('on','false');
                (cur=this).setAttribute('on','true');
                (cur=this).className = 'click';
                alert(event.srcElement.getAttribute("num"));        }
            trs[i].onmouseover=function(){
                this.className=='click' ?'':this.className = 'on';
            }
            trs[i].onmouseout=function(){
                this.className=='click'?'':this.className='eee';
            }
        }
    }
      

  2.   

    首先得到tabel对象，然后用table对象的属性rows.length得到行数。然后for循环就可以了
      

  3.   

    http://blog.csdn.net/william_zheng2010/archive/2010/07/22/5755262.aspx
    这里有操作table对象的文章。。你一看便知道了
      

  4.   

    你onload的时候是循环加载完毕了，你alert(i)当然是最后一个，因为这个i跟你的onclick没有关系。你应该 alert(this.getAttribute('num'));
      

  5.   

    那只是一个例子 不仅仅是针对table
    实际用的时候也是不需要getAttribute('num')这个属性的
    除了另设一个属性外 难道没有别的方法取到当前的序号
      

  6.   

    没有加载 完成  var rows=document.getElementById("table1").rows;
      

  7.   

    这是闭包的问题，你绑定事件的时候，alert指向的是i的引用，并不是i的值。
    当调用onclick事件时，i的值已经变成循环后的最后一个值了，也就是5。解决的方法很简单，创建一个闭包就可以：    for(var i=0; i<trs.length; i++){
            trs[i].setAttribute('num',i);
            trs[i].setAttribute('on','false');
            trs[i].className='eee';
            (function(m){//此处接收传入的i值，不是引用
                trs[m].onclick=function(){
                    var a = this.getAttribute('on');
                    cur.className='eee';
                    cur.setAttribute('on','false');
                    (cur=this).setAttribute('on','true');
                    (cur=this).className = 'click';
                    alert(m);
                }
            })(i);//此处将i当作数值传入匿名函数
            ……