怎样为表格中的所有td一次性设置它们的onMouseover事件,而不用为每一个td去添加onMouseover事件。自己在无意中遇到这个问题,还请各位大侠帮忙解决一下噢!

解决方案 »


  1. <style>
    #otbl {
    font-size: 12pt;
    border-collapse: collapse;
    border: 1px solid #B0B0B0;
    }#otbl td{
    width: 40px;
    height: 30px;
    border: 1px solid #B0B0B0;
    }
    </style>
    <script type="text/javascript">
    <!--
    function getTdValue(e){
    var e = e || window.event;
    var otarget = e.srcElement || e.target;
    alert(otarget.innerHTML);
    }
    //-->
    </script>
    <table id="otbl" onclick="getTdValue(event)">
    <tr>
    <td>Jack</td>
    <td>Tom</td>
    <td>Jimmy</td>
    </tr>
    <tr>
    <td>22</td>
    <td>15</td>
    <td>34</td>
    </tr>
    </table>
      


  2. <script type="text/javascript"> 
    function doit(){
      alert("xx");
    }
    window.onload=function(){
       var tbl = document.getElementById("tb");
       var  a = tbl.getElementsByTagName("td");
       for(var i=0;i<a.length;i++){
         if(document.all) a[i].attachEvent("onmouseover",doit);
         else a[i].addEventListener("mouseover",doit,false);
       }
    }
    </script> 
    </head> <body> <table id="tb">
      <tr><td>1</td><td>4</td></tr>
      <tr><td>2</td><td>3</td></tr>
    </table>
      

类似问题 »